/**
 * WS Booster - Bento Pro (7 presets)
 * Identite visuelle : fond cards navy #1A1A2E, textes/titres/boutons gold #B8935A,
 * typographie Work Sans (Google Font, chargee via wp_register_style 'ws-bento-pro-fonts').
 */

/* === BASE === */
.ws-bp {
    --ws-bp-cols: 4;
    /* Valeur de repli pour les elements internes des presets qui lisent
       var(--ws-bp-card-bg). Alignee sur le defaut du controle "Fond des
       cards" (#1a1a2e) : rendu identique quand on ne personnalise pas. */
    --ws-bp-card-bg: #1a1a2e;
    --ws-bp-text: #b8935a;
    display: grid;
    gap: 16px;
    width: 100%;
    /* Anti-debordement : le widget DOIT rester dans sa colonne Elementor.
       max-width borne la largeur, box-sizing inclut le padding, min-width:0
       autorise le grid container a shrinker sous le min-content de ses items. */
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Typographie globale Work Sans pour TOUT le widget (titre + texte + bouton).
       Le user peut override via les controles typo Elementor (title_typography). */
    font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Anti-debordement (suite) : les grid items (cards) doivent pouvoir shrinker
   sous la taille intrinseque de leur contenu, sinon une image / un mot non
   wrappable force la track grid a grossir et la grille deborde de la colonne
   Elementor parent. Pattern canonique grid : min-width:0 sur les enfants +
   minmax(0, minmax(0, 1fr)) dans les grid-template-columns (cf patches plus bas). */
.ws-bp > .ws-bp__card,
.ws-bp > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Force la typo Work Sans sur tous les descendants (titres, paragraphes, boutons,
   spans, listes, etc.). Inherit sur la plupart mais on est defensif contre les
   themes WP qui forcent souvent une famille de polices sur h1-h6. */
.ws-bp,
.ws-bp h1, .ws-bp h2, .ws-bp h3, .ws-bp h4, .ws-bp h5, .ws-bp h6,
.ws-bp p, .ws-bp span, .ws-bp a, .ws-bp button, .ws-bp ul, .ws-bp li {
    font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* v4.9.12 : SEPARATION TITRES (gold) vs BODY TEXT (blanc) - MANIFEST §4.0.2
   La regle "couleur adaptee au fond" sur les cards navy implique :
   - Titres + eyebrows + categories : GOLD #B8935A (identite WS Booster)
   - Body text (description) + list items : BLANC attenue (lisibilite) */

/* TITRES en gold */
.ws-bp .ws-bp__title,
.ws-bp .ws-bp__pl-title,
.ws-bp .ws-bp__mxl-title,
.ws-bp .ws-bp__mxl-list-title,
.ws-bp .ws-bp__mag-title,
.ws-bp .ws-bp__m-title {
    color: #b8935a;
}

/* ETIQUETTES / CATEGORIES en gold */
.ws-bp .ws-bp__subtitle,
.ws-bp .ws-bp__eyebrow,
.ws-bp .ws-bp__mag-cat,
.ws-bp .ws-bp__mxl-cat {
    color: #b8935a;
}

/* BODY TEXT (descriptions) en BLANC attenue sur fond sombre */
.ws-bp .ws-bp__text,
.ws-bp .ws-bp__pl-desc,
.ws-bp .ws-bp__m-text {
    color: rgba(255, 255, 255, 0.88);
}

/* LIST ITEMS en BLANC attenue (sur fond sombre) */
.ws-bp .ws-bp__list-item,
.ws-bp .ws-bp__list-text {
    color: rgba(255, 255, 255, 0.85);
}

/* Pilier : texte sur fond widget (pas dans une card) -> noir par defaut */
.ws-bp--pilier {
    --ws-bp-text: #0f172a;
}

.ws-bp__card {
    position: relative;
    display: block;
    background: var(--ws-bp-card-bg);
    color: var(--ws-bp-text);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    isolation: isolate;
}

.ws-bp__fill-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
    transition: transform 0.5s ease;
}
/* Aussi pour les videos de fond */
.ws-bp__fill-video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
}

/* Voile overlay : couche colore translucide entre l'image et le contenu.
   z-index 1 = au-dessus de l'image (z-index 0) et au-dessous du content (z-index 2). */
.ws-bp__media-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* S'assurer que le content passe AU-DESSUS de l'overlay et de l'image */
.ws-bp__content {
    z-index: 2;
}

.ws-bp__fill-img--corner {
    position: absolute;
    right: -10%;
    bottom: -10%;
    width: 60%;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

.ws-bp__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    color: inherit;
}

.ws-bp__title--xl { font-size: clamp(21px, 3.5vw, 34px); }
.ws-bp__title--sm { font-size: 12px; font-weight: 500; }

.ws-bp__subtitle {
    margin: 4px 0 0;
    font-size: 11px;
    opacity: 0.85;
    color: inherit;
}

.ws-bp__text {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: inherit;
    opacity: 0.9;
}

.ws-bp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
    color: inherit;
}

.ws-bp__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Bouton CTA universel : fond blanc + texte GOLD (#B8935A).
   v4.9.9 : line-height: 1 EXPLICITE pour centrage vertical parfait du texte.
   Sans ca le theme WP impose line-height 1.5 qui decentre le texte vers le haut
   par rapport au padding (5px haut + 5px bas != centre visuel). */
.ws-bp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 14px;
    margin-top: 10px;
    background: #ffffff;
    color: #b8935a;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: fit-content;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* Le glyph arrow "->" / chevron sit slightly above baseline -> compensation
   pour centrage visuel parfait dans la pill. */
.ws-bp__btn > span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    transform: translateY(-1px);
}

/* v4.9.30 : ANTI-SNAP FINAL. 2 causes identifiees apres recherche GSAP :
   1) Layer GPU drop a la fin -> repaint CPU -> sub-pixel anti-aliasing
      change -> snap perceptible. Fix : will-change permanent.
   2) CSS `transition: transform 0.3s ease` sur .ws-bp__card (pour hover
      lift) interfere : tout micro pixel-rounding apres GSAP declenche une
      transition de 0.3s = sensation "settling mecanique" exacte que le user
      ressent. Fix : SUPPRIMER la transition transform sur les bentos animes,
      garder uniquement sur hover (declenche par :hover state).
*/
.ws-bp[data-anim] .ws-bp__card {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    /* CRITIQUE : pas de transition transform = pas de "settling" CSS
       apres l'anim GSAP. Box-shadow garde sa transition pour le hover. */
    transition: box-shadow 0.3s ease !important;
}
/* Hover effects gardent leur transition transform via les classes specifiques
   .ws-bp-hov-tilt, .ws-bp-hov-zoom, etc. - elles ont leur propre selecteur. */
.ws-bp[data-anim].ws-bp-lift-yes .ws-bp__card:hover,
.ws-bp[data-anim] .ws-bp__card:hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* ===========================================================================
   v4.9.15 : MODE D'AFFICHAGE GLOBAL "Image seule" (display_mode = full-image)
   Cache TOUT le contenu textuel (overlays, contenus, boutons, voiles, stats)
   pour ne laisser apparaitre que les images / videos de fond des cards.
   Bascule en 1 clic depuis le panneau Bento Pro.
   =========================================================================== */
.ws-bp-mode-full-image .ws-bp__content,
.ws-bp-mode-full-image .ws-bp__concierge-overlay,
.ws-bp-mode-full-image .ws-bp__g-overlay,
.ws-bp-mode-full-image .ws-bp__mxl-content,
.ws-bp-mode-full-image .ws-bp__mxl-shade,
.ws-bp-mode-full-image .ws-bp__mag-content,
.ws-bp-mode-full-image .ws-bp__mag-shade,
.ws-bp-mode-full-image .ws-bp__launchpad-text,
.ws-bp-mode-full-image .ws-bp__vitrine-content,
.ws-bp-mode-full-image .ws-bp__pl-body,
.ws-bp-mode-full-image .ws-bp__pl-overlay,
.ws-bp-mode-full-image .ws-bp__pl-shade,
.ws-bp-mode-full-image .ws-bp__m-body,
.ws-bp-mode-full-image .ws-bp__portrait-intro,
.ws-bp-mode-full-image .ws-bp__btn,
.ws-bp-mode-full-image .ws-bp__mag-btn,
.ws-bp-mode-full-image .ws-bp__stat,
.ws-bp-mode-full-image .ws-bp__media-overlay {
    display: none !important;
}
/* En mode image, les visuals de Mosaique / Launchpad doivent occuper la
   pleine card (sans plus etre alignes a cote du body texte). */
.ws-bp-mode-full-image .ws-bp__m-visual,
.ws-bp-mode-full-image .ws-bp__launchpad-visual {
    flex: 1 1 100%;
    width: 100%;
    height: 100%;
    margin: 0;
}
.ws-bp-mode-full-image .ws-bp__m-visual img,
.ws-bp-mode-full-image .ws-bp__launchpad-visual img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
/* En mode image seule, les cards doivent rester visibles meme si elles n'ont
   PAS d'image (sinon la card s'effondre). On laisse le fond navy + un padding
   minimum pour que la grille garde sa structure. */
.ws-bp-mode-full-image .ws-bp__card {
    min-height: 200px;
}

/* ===========================================================================
   v4.9.11 : GARANTIE ANTI-CHEVAUCHEMENT UNIVERSELLE (MANIFEST §4.0.4)
   Tout bouton qui suit un contenu (texte, liste, titre) doit avoir 20px
   minimum de margin-top. Defensive : protege tous les presets meme en cas
   d'oubli dans le CSS specifique du preset.
   =========================================================================== */
.ws-bp__list + .ws-bp__btn,
.ws-bp__list + .ws-bp__mag-btn,
.ws-bp__list + .ws-bp__mxl-btn,
.ws-bp__text + .ws-bp__btn,
.ws-bp__text + .ws-bp__mag-btn,
.ws-bp__text + .ws-bp__mxl-btn,
.ws-bp__title + .ws-bp__btn,
.ws-bp__pl-desc + .ws-bp__btn {
    margin-top: 20px !important;
}
/* Petit Loft : cards etroites, gap legerement reduit (16px suffit) */
.ws-bp--petitloft .ws-bp__list + .ws-bp__btn,
.ws-bp--petitloft .ws-bp__text + .ws-bp__btn,
.ws-bp--petitloft .ws-bp__pl-desc + .ws-bp__btn {
    margin-top: 16px !important;
}
/* Margin bottom safety sur les listes pour eviter d'autres patterns d'overlap */
.ws-bp__list {
    margin-bottom: 0;
}
.ws-bp__pl-body .ws-bp__list,
.ws-bp__pl-overlay .ws-bp__list,
.ws-bp__concierge-overlay .ws-bp__list,
.ws-bp__g-overlay .ws-bp__list,
.ws-bp__mag-top .ws-bp__list {
    margin-bottom: 0;
}

.ws-bp__btn--solid { background: #b8935a; color: #1a1a2e; box-shadow: 0 2px 8px rgba(184, 147, 90, 0.3); }
.ws-bp__btn--outline { background: transparent; color: #b8935a; border: 1px solid #b8935a; }

/* v4.9.x : bouton popup (vrai <button> qui ouvre une modal).
   Neutralise les styles natifs du browser, garde le look pill .ws-bp__btn,
   et autorise le clic au-dessus de la card (z-index + pointer-events). */
button.ws-bp__btn--popup {
    border: 0;
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    /* Sur les cards en mode popup (pas de <a> englobant), le bouton est
       l'unique element cliquable -> on le rend bien interactif. */
    position: relative;
    z-index: 3;
    pointer-events: auto;
}
button.ws-bp__btn--popup:focus-visible {
    outline: 2px solid rgba(184, 147, 90, 0.6);
    outline-offset: 2px;
}

/* Bouton Magazine "Read for $X.XX" : meme palette (fond blanc, texte gold)
   pour matcher le reste. */
.ws-bp__mag-btn {
    color: #b8935a !important;
    font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ws-bp__card:hover .ws-bp__btn {
    transform: translateX(2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Reset defensif : neutralise la marge-bas par defaut des themes WP sur la
   derniere balise <p> de chaque card (Blocksy / theme Twenty injectent
   souvent margin-bottom: 1em sur p -> ajoute du vide en bas des cards). */
.ws-bp__card p:last-child { margin-bottom: 0; }

/* Hover lift */
.ws-bp-lift-yes .ws-bp__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -10px rgba(0,0,0,0.18);
}

.ws-bp-lift-yes .ws-bp__card:hover .ws-bp__fill-img:not(.ws-bp__fill-img--corner) {
    transform: scale(1.05);
}

/* ======================================================================
   PHASE 1 : controles per-card universels
   ====================================================================== */

/* ----- Position bouton globale (default des cards sans override per-card)
   La classe est ws-bp-gbtnpos-{bl|bc|br|tl|tc|tr} sur le wrapper widget.
   Cible UNIQUEMENT les cards qui n'ont PAS leur propre ws-bp__card--btnpos-X. */
.ws-bp-gbtnpos-bl .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__btn,
.ws-bp-gbtnpos-bl .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__mag-btn {
    position: absolute; margin: 0; z-index: 10; bottom: 20px; left: 20px; right: auto; top: auto;
}
.ws-bp-gbtnpos-bc .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__btn,
.ws-bp-gbtnpos-bc .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__mag-btn {
    position: absolute; margin: 0; z-index: 10; bottom: 20px; left: 50%; right: auto; top: auto; transform: translateX(-50%);
}
.ws-bp-gbtnpos-br .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__btn,
.ws-bp-gbtnpos-br .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__mag-btn {
    position: absolute; margin: 0; z-index: 10; bottom: 20px; right: 20px; left: auto; top: auto;
}
.ws-bp-gbtnpos-tl .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__btn,
.ws-bp-gbtnpos-tl .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__mag-btn {
    position: absolute; margin: 0; z-index: 10; top: 20px; left: 20px; right: auto; bottom: auto;
}
.ws-bp-gbtnpos-tc .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__btn,
.ws-bp-gbtnpos-tc .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__mag-btn {
    position: absolute; margin: 0; z-index: 10; top: 20px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%);
}
.ws-bp-gbtnpos-tr .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__btn,
.ws-bp-gbtnpos-tr .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) .ws-bp__mag-btn {
    position: absolute; margin: 0; z-index: 10; top: 20px; right: 20px; left: auto; bottom: auto;
}

/* ----- Position bouton per-card (override le global) ----- */
.ws-bp__card[class*="ws-bp__card--btnpos-"] .ws-bp__btn,
.ws-bp__card[class*="ws-bp__card--btnpos-"] .ws-bp__mag-btn {
    position: absolute;
    margin: 0;
    z-index: 10;
}

/* ----- SMART PLACEMENT : reserve l'espace pour le bouton absolute -----
   Quand le bouton est positionne en bas, on push le contenu via padding-bottom.
   Quand le bouton est en haut, on push via padding-top. Empeche le bouton
   d'ecraser le titre/texte de la card.
   FIX v4.1.3 : .ws-bp__content a position:relative dans la base CSS,
   ce qui fait que le btn absolute se positionne par rapport au content
   au lieu de la card. On force position:static sur content pour qu'il
   relinquisse le contexte de positionnement -> btn relatif a la card. */
.ws-bp__card--btnpos-bl,
.ws-bp__card--btnpos-bc,
.ws-bp__card--btnpos-br {
    padding-bottom: 60px !important;
}
.ws-bp__card--btnpos-tl,
.ws-bp__card--btnpos-tc,
.ws-bp__card--btnpos-tr {
    padding-top: 60px !important;
}
.ws-bp__card[class*="ws-bp__card--btnpos-"] > .ws-bp__content,
.ws-bp__card[class*="ws-bp__card--btnpos-"] .ws-bp__content {
    position: static;
}

/* Cards COMPACT (Atelier row_span=1, hauteur 180px) : on cache l'eyebrow
   et la liste pour eviter overflow. Le titre + description suffisent. */
.ws-bp__card--compact .ws-bp__eyebrow,
.ws-bp__card--compact .ws-bp__list {
    display: none;
}
/* Pareil pour la version globale (ws-bp-gbtnpos-X) appliquee aux cards
   qui n'ont pas leur propre btnpos. */
.ws-bp-gbtnpos-bl .ws-bp__card:not([class*="ws-bp__card--btnpos-"]),
.ws-bp-gbtnpos-bc .ws-bp__card:not([class*="ws-bp__card--btnpos-"]),
.ws-bp-gbtnpos-br .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) {
    padding-bottom: 76px !important;
}
.ws-bp-gbtnpos-tl .ws-bp__card:not([class*="ws-bp__card--btnpos-"]),
.ws-bp-gbtnpos-tc .ws-bp__card:not([class*="ws-bp__card--btnpos-"]),
.ws-bp-gbtnpos-tr .ws-bp__card:not([class*="ws-bp__card--btnpos-"]) {
    padding-top: 76px !important;
}
.ws-bp__card--btnpos-bl .ws-bp__btn,
.ws-bp__card--btnpos-bl .ws-bp__mag-btn { bottom: 20px; left: 20px; right: auto; top: auto; }
.ws-bp__card--btnpos-br .ws-bp__btn,
.ws-bp__card--btnpos-br .ws-bp__mag-btn { bottom: 20px; right: 20px; left: auto; top: auto; }
.ws-bp__card--btnpos-tl .ws-bp__btn,
.ws-bp__card--btnpos-tl .ws-bp__mag-btn { top: 20px; left: 20px; right: auto; bottom: auto; }
.ws-bp__card--btnpos-tr .ws-bp__btn,
.ws-bp__card--btnpos-tr .ws-bp__mag-btn { top: 20px; right: 20px; left: auto; bottom: auto; }
.ws-bp__card--btnpos-bc .ws-bp__btn,
.ws-bp__card--btnpos-bc .ws-bp__mag-btn {
    bottom: 20px; left: 50%; right: auto; top: auto;
    transform: translateX(-50%);
}
.ws-bp__card--btnpos-tc .ws-bp__btn,
.ws-bp__card--btnpos-tc .ws-bp__mag-btn {
    top: 20px; left: 50%; right: auto; bottom: auto;
    transform: translateX(-50%);
}
/* Hover sur button absolute : annule le translateX(2px) qui casserait
   le centrage. On garde l'effet d'ombre seul pour le feedback. */
.ws-bp__card[class*="ws-bp__card--btnpos-"]:hover .ws-bp__btn,
.ws-bp__card[class*="ws-bp__card--btnpos-"]:hover .ws-bp__mag-btn {
    transform: none;
}
.ws-bp__card--btnpos-bc:hover .ws-bp__btn,
.ws-bp__card--btnpos-tc:hover .ws-bp__btn,
.ws-bp__card--btnpos-bc:hover .ws-bp__mag-btn,
.ws-bp__card--btnpos-tc:hover .ws-bp__mag-btn {
    transform: translateX(-50%);
}

/* ----- Alignement titre / texte per-card (override global) ----- */
.ws-bp__card--title-left   .ws-bp__title,
.ws-bp__card--title-left   .ws-bp__mag-title,
.ws-bp__card--title-left   .ws-bp__pl-title,
.ws-bp__card--title-left   .ws-bp__mxl-title,
.ws-bp__card--title-left   .ws-bp__m-title { text-align: left; }
.ws-bp__card--title-center .ws-bp__title,
.ws-bp__card--title-center .ws-bp__mag-title,
.ws-bp__card--title-center .ws-bp__pl-title,
.ws-bp__card--title-center .ws-bp__mxl-title,
.ws-bp__card--title-center .ws-bp__m-title { text-align: center; }
.ws-bp__card--title-right  .ws-bp__title,
.ws-bp__card--title-right  .ws-bp__mag-title,
.ws-bp__card--title-right  .ws-bp__pl-title,
.ws-bp__card--title-right  .ws-bp__mxl-title,
.ws-bp__card--title-right  .ws-bp__m-title { text-align: right; }

.ws-bp__card--text-left   .ws-bp__text,
.ws-bp__card--text-left   .ws-bp__pl-desc,
.ws-bp__card--text-left   .ws-bp__m-text,
.ws-bp__card--text-left   .ws-bp__subtitle { text-align: left; }
.ws-bp__card--text-center .ws-bp__text,
.ws-bp__card--text-center .ws-bp__pl-desc,
.ws-bp__card--text-center .ws-bp__m-text,
.ws-bp__card--text-center .ws-bp__subtitle { text-align: center; }
.ws-bp__card--text-right  .ws-bp__text,
.ws-bp__card--text-right  .ws-bp__pl-desc,
.ws-bp__card--text-right  .ws-bp__m-text,
.ws-bp__card--text-right  .ws-bp__subtitle { text-align: right; }

/* ----- Override hover lift per-card -----
   .ws-bp__card--lift-yes  -> force le lift meme si global = off
   .ws-bp__card--lift-no   -> force off meme si global = on (cancel) */
.ws-bp__card--lift-yes:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.18) !important;
}
.ws-bp__card--lift-no:hover {
    transform: none !important;
    box-shadow: none !important;
}
.ws-bp__card--lift-no:hover .ws-bp__fill-img:not(.ws-bp__fill-img--corner) {
    transform: none !important;
}

/* ----- Override hover effect per-card -----
   .ws-bp__card--hov-none -> annule tout effet hover */
.ws-bp__card--hov-none {
    /* Annule les effets globaux ws-bp-hov-X via specificity + reset transform */
}
.ws-bp__card--hov-none:hover,
.ws-bp__card--hov-none:hover .ws-bp__fill-img,
.ws-bp__card--hov-none:hover .ws-bp__fill-video {
    transform: none !important;
    box-shadow: inherit !important;
}

/* ======================================================================
   PHASE 5b : elements universels rendus par helpers
   - .ws-bp__eyebrow (etiquette au-dessus du titre)
   - .ws-bp__user-icon (icone universelle activable par-card)
   - .ws-bp__list (checklist universelle, max 3 items)
   ====================================================================== */

/* Etiquette : petit texte uppercase tracking marque, au-dessus du titre */
.ws-bp__eyebrow {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #b8935a;
    opacity: 0.85;
    margin: 0 0 6px;
    line-height: 1.2;
}

/* Icone universelle : container 40-48px, l'icone interieure suit currentColor */
.ws-bp__user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 14px;
    color: #b8935a;
}
.ws-bp__user-icon svg,
.ws-bp__user-icon i {
    width: 28px;
    height: 28px;
    font-size: 28px;
    fill: currentColor;
    color: currentColor;
}
/* Alignement icone per-card (.ws-bp__card--icon-{left|center|right}) */
.ws-bp__card--icon-left  .ws-bp__user-icon { margin-right: auto; margin-left: 0; }
.ws-bp__card--icon-center .ws-bp__user-icon { margin-left: auto; margin-right: auto; display: flex; }
.ws-bp__card--icon-right .ws-bp__user-icon { margin-left: auto; margin-right: 0; }

/* Checklist : liste de 3 items max, icone gauche ou droite */
.ws-bp__list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ws-bp__list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    line-height: 1.35;
    color: inherit;
}
.ws-bp__list--icon-right .ws-bp__list-item {
    flex-direction: row;
}
.ws-bp__list-text {
    flex: 1 1 auto;
}
.ws-bp__list-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #b8935a;
}
.ws-bp__list-icon svg,
.ws-bp__list-icon i {
    width: 16px;
    height: 16px;
    font-size: 16px;
    fill: currentColor;
    color: currentColor;
}

/* ======================================================================
   PHASE 4 : CARROUSEL MOBILE (sous 768px, swipe horizontal scroll-snap)
   ====================================================================== */
@media (max-width: 768px) {
    /* Bascule TOUS les presets en carrousel horizontal scroll-snap.
       display: contents sur les wrappers internes (Magazine zones, Petit Loft
       rows, etc.) pour aplanir la structure : les cards deviennent toutes
       directement enfants de .ws-bp pour le snap. */
    .ws-bp.ws-bp--mobile-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        column-count: auto !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding: 0 16px !important;
        scroll-padding-left: 16px;
        scrollbar-width: none;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
    .ws-bp.ws-bp--mobile-carousel::-webkit-scrollbar { display: none; }

    /* Aplanit les wrappers nested (Magazine 2 zones, Petit Loft rows, MXL columns) */
    .ws-bp.ws-bp--mobile-carousel .ws-bp__mag-zone,
    .ws-bp.ws-bp--mobile-carousel .ws-bp__mag-zone--left,
    .ws-bp.ws-bp--mobile-carousel .ws-bp__mag-zone--right,
    .ws-bp.ws-bp--mobile-carousel .ws-bp__mag-row {
        display: contents;
    }

    /* Cards en mobile carousel : largeur fixe + snap centre */
    .ws-bp.ws-bp--mobile-carousel > .ws-bp__card,
    .ws-bp.ws-bp--mobile-carousel .ws-bp__card {
        flex: 0 0 85%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        height: auto !important;
        min-height: 320px;
        max-height: none !important;
        margin: 0 !important;
        align-self: stretch !important;
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
    }

    /* ===========================================================================
       v4.9.16 : MODE STACK MOBILE - cards les unes sous les autres en format
       card service uniforme. S'active via ws-bp-mlay-stack (prefix_class du
       control mobile_layout). Bascule TOUS les presets vers une pile verticale.
       =========================================================================== */
    .ws-bp-mlay-stack .ws-bp {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }
    /* Aplanit les wrappers nested (Magazine zones, Petit Loft rows, MXL cols) */
    .ws-bp-mlay-stack .ws-bp__mag-zone,
    .ws-bp-mlay-stack .ws-bp__mag-zone--left,
    .ws-bp-mlay-stack .ws-bp__mag-zone--right,
    .ws-bp-mlay-stack .ws-bp__mag-row,
    .ws-bp-mlay-stack .ws-bp__mxl-col,
    .ws-bp-mlay-stack .ws-bp__vitrine-items,
    .ws-bp-mlay-stack .ws-bp__portrait-features,
    .ws-bp-mlay-stack .ws-bp__portrait-intro {
        display: contents !important;
    }
    /* Cards en stack : pleine largeur, hauteur auto, format card service */
    .ws-bp-mlay-stack .ws-bp__card {
        width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        min-height: 280px;
        max-height: none !important;
        margin: 0 !important;
        align-self: stretch !important;
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
        padding: 24px !important;
    }
    /* MXL avec image full-cover : keep aspect ratio raisonnable */
    .ws-bp-mlay-stack .ws-bp__card--mosaiquexl,
    .ws-bp-mlay-stack .ws-bp__card--runway,
    .ws-bp-mlay-stack .ws-bp__card--spotlight,
    .ws-bp-mlay-stack .ws-bp__card--magazine {
        aspect-ratio: 16 / 10;
        padding: 0 !important;
    }
    /* Vitrine hero : reduce padding pour matcher items */
    .ws-bp-mlay-stack .ws-bp__card--vitrine-hero {
        min-height: 280px;
        padding: 24px !important;
    }
}

/* Dots de pagination (injectes par JS) */
.ws-bp__dots {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
@media (max-width: 768px) {
    .ws-bp__dots { display: flex; }
}
.ws-bp__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.25);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}
.ws-bp__dot:hover {
    background: rgba(15, 23, 42, 0.5);
}
.ws-bp__dot.is-active {
    background: #1a1a2e;
    transform: scale(1.3);
}

/* v4.7.7 : Container nav (dots + fleches) cote a cote */
.ws-bp__nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
}
@media (max-width: 768px) {
    .ws-bp__nav { display: flex; }
}
.ws-bp--tablet-carousel ~ .ws-bp__nav,
.ws-bp__nav.ws-bp__nav--tablet {
    /* Si tablette carrousel actif, on affiche aussi nav sur tablette */
}

/* Fleches gauche/droite */
.ws-bp__arrow {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(184, 147, 90, 0.3);
    border-radius: 50%;
    background: #ffffff;
    color: #b8935a;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ws-bp__arrow:hover:not(:disabled) {
    background: #b8935a;
    color: #ffffff;
    border-color: #b8935a;
    transform: translateX(0) scale(1.05);
}
.ws-bp__arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* =============================================================
   v4.9.x : 3 emplacements possibles pour les fleches mobile
   (controle "Position des fleches" sur le widget).
   ============================================================= */

/* --- Position 1 : top-right (haut droite, rapprochees) ---
   Les overrides s'appliquent en mobile (display: flex herite de .ws-bp__nav
   sous 768px). On ne force PAS display:flex ici pour rester cache en desktop. */
.ws-bp__nav--top-right {
    justify-content: flex-end;
    gap: 6px;          /* fleches rapprochees */
    margin: 0 0 12px;  /* espace avant le bento */
}
.ws-bp__nav--top-right .ws-bp__arrow {
    width: 32px;
    height: 32px;
    font-size: 13px;
}

/* --- Position 2 : sides (centre, chevauche le carrousel) ---
   Le bento devient relative ; les fleches sont des enfants directs en
   position:absolute, centrees verticalement, debordant de chaque cote.
   Cachees par defaut, montrees uniquement en mobile (et tablette si
   tablet_carousel actif). */
.ws-bp[data-mobile-arrows-pos="sides"] {
    position: relative;
}
.ws-bp__arrow--side {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    /* Ombre douce pour rester visible meme par-dessus une card claire. */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.ws-bp__arrow--side-prev { left: 8px; }
.ws-bp__arrow--side-next { right: 8px; }
.ws-bp__arrow--side:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.08);
}
@media (max-width: 768px) {
    .ws-bp__arrow--side { display: inline-flex; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .ws-bp--tablet-carousel .ws-bp__arrow--side { display: inline-flex; }
}

/* --- Position 3 : bottom (defaut) ---
   Comportement existant : .ws-bp__nav--bottom = .ws-bp__nav classique.
   Centre + gap normal, deja gere par les regles de base de .ws-bp__nav. */

/* v4.7.7 : Carrousel tablette (ws-bp--tablet-carousel) - actif entre 769px et 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    .ws-bp.ws-bp--tablet-carousel {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
        column-count: auto !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding: 0 16px !important;
        scroll-padding-left: 16px;
        scrollbar-width: none;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
    .ws-bp.ws-bp--tablet-carousel::-webkit-scrollbar { display: none; }
    .ws-bp.ws-bp--tablet-carousel .ws-bp__mag-zone,
    .ws-bp.ws-bp--tablet-carousel .ws-bp__mag-zone--left,
    .ws-bp.ws-bp--tablet-carousel .ws-bp__mag-zone--right,
    .ws-bp.ws-bp--tablet-carousel .ws-bp__mag-row {
        display: contents;
    }
    .ws-bp.ws-bp--tablet-carousel > .ws-bp__card,
    .ws-bp.ws-bp--tablet-carousel .ws-bp__card {
        flex: 0 0 65%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        height: auto !important;
        min-height: 320px;
        max-height: none !important;
        margin: 0 !important;
        align-self: stretch !important;
        grid-column: auto !important;
        grid-row: auto !important;
        grid-area: auto !important;
    }
    .ws-bp--tablet-carousel ~ .ws-bp__nav { display: flex; }
}

/* ======================================================================
   PRESET : ATELIER (grille libre)
   ====================================================================== */
.ws-bp--atelier {
    grid-template-columns: repeat(var(--ws-bp-cols, 4), minmax(0, 1fr));
    grid-auto-rows: 180px;
    grid-auto-flow: dense;
}

.ws-bp--atelier .ws-bp__card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    /* v4.2.1 : flex-start (au lieu de flex-end) pour eviter que le contenu
       trop tall (avec liste) sorte par le HAUT et tronque le titre. Maintenant
       le contenu commence en haut, l'espace vide est en bas (ou occupe par
       le bouton absolu). */
    justify-content: flex-start;
}

/* v4.3.3 : type "image" garde le padding standard (24px) car on peut maintenant
   ajouter du contenu par-dessus l'image. L'image elle-meme reste en absolute
   inset:0 donc elle couvre toute la card peu importe le padding. */
.ws-bp--atelier .ws-bp__card--image { /* padding: 24px par defaut, herite */ }
/* Stat type : force le centrage (override le justify-start global d'Atelier) */
.ws-bp--atelier .ws-bp__card--stat {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.ws-bp--atelier .ws-bp__card--stat .ws-bp__content {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.ws-bp__stat {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1;
    color: inherit;
}

.ws-bp__stat-label {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.8;
    text-align: center;
}

.ws-bp__content {
    position: relative;
    z-index: 1;
}

/* v4.3.x : l'image plein cadre remplace COMPLETEMENT le fond bleu de la card
   (plus d'opacity faded). Si user veut un voile sombre par-dessus pour la
   lisibilite du texte, utiliser le controle "Voile sur image" (Style tab). */
.ws-bp--atelier .ws-bp__card--card .ws-bp__fill-img {
    opacity: 1;
}

/* ======================================================================
   PRESET : CONCIERGE (categories premium)
   ====================================================================== */
.ws-bp--concierge {
    grid-template-columns: repeat(var(--ws-bp-cols, 3), minmax(0, 1fr));
    grid-auto-rows: 260px;
    grid-auto-flow: dense;
}

.ws-bp--concierge .ws-bp__card {
    min-height: 260px;
    background: var(--ws-bp-card-bg, #1a1a1a);
}

.ws-bp--concierge .ws-bp__card--big {
    grid-column: span 2;
    grid-row: span 2;
}

.ws-bp--concierge .ws-bp__fill-img {
    z-index: 0;
}

.ws-bp__concierge-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 24px 28px;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 80%);
    color: #fff;
    /* v4.9.13 : flex column pour respecter rhythm vertical entre elements
       (MANIFEST Partie 4.0.4) - eyebrow / titre / desc / liste / bouton */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* v4.9.2 : 'flex' (pas 'inline-flex') sinon le titre reste sur la meme
   ligne que l'eyebrow inline-block au-dessus. */
.ws-bp--concierge .ws-bp__title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.ws-bp--concierge .ws-bp__subtitle {
    color: rgba(212,175,100,0.9);
    font-size: 13px;
    font-style: italic;
    margin-top: 6px;
}

.ws-bp__chevron {
    font-size: 22px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.ws-bp--concierge .ws-bp__card:hover .ws-bp__chevron {
    transform: translateX(4px);
}

/* ======================================================================
   PRESET : LAUNCHPAD (SaaS features)
   ====================================================================== */
.ws-bp--launchpad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ws-bp--launchpad .ws-bp__card--launchpad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    padding: 28px;
    background: var(--ws-bp-card-bg, #0b1220);
    color: var(--ws-bp-text, #e5e7eb);
    border: 1px solid rgba(255,255,255,0.08);
    align-items: center;
    min-height: 280px;
}

.ws-bp--launchpad .ws-bp__launchpad-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
}

.ws-bp--launchpad .ws-bp__title {
    color: #fff;
    font-size: 20px;
}

.ws-bp--launchpad .ws-bp__text {
    color: #9ca3af;
    font-size: 14px;
    margin: 0;
}

.ws-bp__checklist {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ws-bp__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    line-height: 1.4;
}

.ws-bp__checklist svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: #10b981;
}

.ws-bp__launchpad-visual {
    max-width: 240px;
}

.ws-bp__launchpad-visual img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* ======================================================================
   PRESET : VITRINE (1 hero + n items)
   ====================================================================== */
.ws-bp--vitrine {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.ws-bp__card--vitrine-hero {
    min-height: 460px;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* v4.9.6 : palette unifiee navy + accent gold. Le user peut override
       via Studio (card_bg_color / gradient builder). */
    background: var(--ws-bp-card-bg, linear-gradient(135deg, #1A1A2E, #0f0f1c));
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ws-bp__card--vitrine-hero .ws-bp__vitrine-content {
    position: relative;
    z-index: 2;
    max-width: 55%;
    /* v4.9.11 : flex column avec rhythm vertical entre eyebrow/titre/text/list/btn */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ws-bp__vitrine-items {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

.ws-bp__card--vitrine-item {
    padding: 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

/* v4.9.6 : palette unifiee navy. Le user peut override via Studio
   (card_bg_color / gradient builder per-card). Effet de variation
   subtil grace au gradient legerement different sur odd/even. */
.ws-bp__card--vitrine-item:nth-child(odd) {
    background: var(--ws-bp-card-bg, linear-gradient(135deg, #1A1A2E, #14142a));
}
.ws-bp__card--vitrine-item:nth-child(even) {
    background: var(--ws-bp-card-bg, linear-gradient(135deg, #20203a, #1A1A2E));
}

.ws-bp__card--vitrine-item .ws-bp__vitrine-content {
    position: relative;
    z-index: 2;
    max-width: 60%;
    /* v4.9.11 : flex column avec rhythm vertical entre eyebrow/titre/text/list/btn */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ws-bp--vitrine .ws-bp__title {
    color: #fff;
    font-size: 22px;
}

.ws-bp--vitrine .ws-bp__text {
    color: rgba(255,255,255,0.85);
}

/* ======================================================================
   PRESET : PILIER (trust bar horizontale)
   ====================================================================== */
.ws-bp--pilier {
    display: grid;
    grid-template-columns: repeat(var(--ws-bp-cols, 4), minmax(0, 1fr));
    gap: 24px;
    padding: 32px;
    background: #eab54d;
    border-radius: 24px;
}

.ws-bp__card--pilier {
    background: transparent;
    border-radius: 0;
    color: var(--ws-bp-text, #0f172a);
    text-align: center;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    overflow: visible;
}

.ws-bp--pilier .ws-bp__icon {
    width: 42px;
    height: 42px;
    background: #0f172a;
    color: #fff;
    border-radius: 8px;
    font-size: 22px;
}

.ws-bp--pilier .ws-bp__title {
    color: var(--ws-bp-text, #0f172a);
    font-size: 20px;
    font-weight: 700;
}

.ws-bp--pilier .ws-bp__text {
    color: var(--ws-bp-text, #0f172a);
    font-size: 14px;
    margin: 0;
}

/* ======================================================================
   PRESET : COCKPIT (stats grid)
   ====================================================================== */
.ws-bp--cockpit {
    grid-template-columns: repeat(var(--ws-bp-cols, 4), minmax(0, 1fr));
}

.ws-bp__card--cockpit {
    padding: 28px 24px;
    background: var(--ws-bp-card-bg, #ffffff);
    color: var(--ws-bp-text, inherit);
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 160px;
}

.ws-bp--cockpit .ws-bp__icon {
    width: 40px;
    height: 40px;
    color: #6366f1;
    font-size: 22px;
    margin-bottom: 8px;
}

.ws-bp__big-number {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 700;
    line-height: 1;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.ws-bp--cockpit .ws-bp__title--sm {
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
    font-weight: 600;
}

.ws-bp--cockpit .ws-bp__subtitle {
    color: #9ca3af;
    font-size: 12px;
    opacity: 1;
}

/* ======================================================================
   PRESET : PORTRAIT (intro + 4 features staggered)
   ====================================================================== */
.ws-bp--portrait {
    --ws-bp-accent: #b8935a;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 48px;
    align-items: center;
    background: transparent !important;
}

.ws-bp__portrait-intro {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 10px;
}

.ws-bp__portrait-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--ws-bp-accent) 15%, transparent);
    color: var(--ws-bp-accent);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    width: fit-content;
}

.ws-bp__portrait-title {
    margin: 0;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--ws-bp-accent);
    letter-spacing: -0.02em;
}

.ws-bp__portrait-text {
    color: #4b5563;
    font-size: 15px;
    line-height: 1.65;
}

.ws-bp__portrait-text p {
    margin: 0 0 12px;
}

.ws-bp__portrait-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--ws-bp-accent);
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    width: fit-content;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ws-bp__portrait-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(0,0,0,0.25);
}

/* Grid 2x2 staggered */
.ws-bp__portrait-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* row-gap > max translateY (±40px) pour eviter le chevauchement vertical
       entre les cards staggered. col-gap reste serre. */
    column-gap: 24px;
    row-gap: 96px;
}

.ws-bp__card--portrait {
    padding: 32px 28px;
    background: var(--ws-bp-card-bg, #ffffff);
    color: var(--ws-bp-text, inherit);
    border-radius: 20px;
    box-shadow: 0 4px 20px -8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 280px;
}

/* Stagger : decale cards 2 et 3 vers le bas pour effet zigzag */
.ws-bp__card--portrait-2 { transform: translateY(40px); }
.ws-bp__card--portrait-3 { transform: translateY(-40px); }
.ws-bp__card--portrait-4 { transform: translateY(0); }

.ws-bp__portrait-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ws-bp-accent) 15%, transparent);
    color: var(--ws-bp-accent);
    font-size: 22px;
    margin-bottom: 4px;
}

/* Image optionnelle dans portrait (en haut de la card) */
.ws-bp__portrait-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 14px;
    margin-bottom: 4px;
}
.ws-bp__portrait-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    display: block;
}

.ws-bp__portrait-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.ws-bp--portrait .ws-bp__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ws-bp-accent);
    letter-spacing: -0.01em;
}

.ws-bp--portrait .ws-bp__text {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    opacity: 1;
}

/* Icon accent strong : 4eme card avec fond plein */
.ws-bp__card--portrait-4 .ws-bp__portrait-icon {
    background: var(--ws-bp-accent);
    color: #fff;
}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width: 1024px) {
    .ws-bp--launchpad { grid-template-columns: 1fr; }
    .ws-bp--launchpad .ws-bp__card--launchpad {
        grid-template-columns: 1fr;
    }
    .ws-bp__launchpad-visual { max-width: 100%; margin-top: 16px; }

    .ws-bp--vitrine { grid-template-columns: 1fr; }
    .ws-bp__card--vitrine-hero .ws-bp__vitrine-content { max-width: 100%; }

    .ws-bp--runway {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .ws-bp__card--runway-4, .ws-bp__card--runway-5 { display: none; }

    .ws-bp--portrait {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ws-bp__card--portrait-2,
    .ws-bp__card--portrait-3,
    .ws-bp__card--portrait-4 {
        transform: none;
    }
}

@media (max-width: 768px) {
    .ws-bp--atelier { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .ws-bp--atelier .ws-bp__card {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        min-height: 180px;
    }

    .ws-bp--concierge { grid-template-columns: 1fr; }
    .ws-bp--concierge .ws-bp__card--big {
        grid-column: span 1;
        grid-row: span 1;
    }

    .ws-bp--pilier {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 20px;
    }

    .ws-bp--cockpit { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ws-bp--runway {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ws-bp__card--vitrine-hero { padding: 32px; min-height: 320px; }
    .ws-bp__card--vitrine-hero .ws-bp__vitrine-content { max-width: 100%; }
    .ws-bp__card--vitrine-item { padding: 24px; }

    .ws-bp__portrait-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .ws-bp__card--portrait {
        min-height: auto;
        padding: 24px;
    }
}

/* === REDUCE MOTION === */
@media (prefers-reduced-motion: reduce) {
    .ws-bp__card,
    .ws-bp__fill-img,
    .ws-bp__chevron,
    .ws-bp__btn {
        transition: none !important;
    }
}

/* ============================================================
   v2.x : NOUVELLES FEATURES
   - Bordure lumineuse (glow) par card
   - Description extra avec modes always/hover/reveal
   - Video de fond
   - Effets hover globaux
   ============================================================ */

/* === BORDURE LUMINEUSE === */
.ws-bp__card--glow {
    --ws-bp-glow-color: #6366f1;
    box-shadow: 0 0 0 1px var(--ws-bp-glow-color), 0 0 20px -2px var(--ws-bp-glow-color);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.ws-bp__card--glow:hover {
    box-shadow: 0 0 0 2px var(--ws-bp-glow-color), 0 0 30px 0 var(--ws-bp-glow-color);
}

/* === VIDEO DE FOND === */
.ws-bp__fill-video {
    pointer-events: none;
}

/* === DESC EXTRA === */
.ws-bp__desc-extra {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.9;
}

.ws-bp__card--desc-hover .ws-bp__desc-extra {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    transition: opacity 0.3s ease, max-height 0.4s ease, margin-top 0.3s ease;
}
.ws-bp__card--desc-hover:hover .ws-bp__desc-extra {
    opacity: 1;
    max-height: 200px;
    margin-top: 8px;
}

.ws-bp__card--desc-reveal .ws-bp__desc-extra {
    opacity: 0;
    transform: translateY(12px);
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin-top 0.3s ease;
}
.ws-bp__card--desc-reveal:hover .ws-bp__desc-extra {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
    margin-top: 8px;
}

/* Mobile : on force always */
@media (hover: none) {
    .ws-bp__card--desc-hover .ws-bp__desc-extra,
    .ws-bp__card--desc-reveal .ws-bp__desc-extra {
        opacity: 1 !important;
        max-height: 200px !important;
        margin-top: 8px !important;
        transform: none !important;
    }
}

/* Overlay runway pour desc */
.ws-bp__runway-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 12px 16px;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    z-index: 2;
}

/* === EFFETS HOVER GLOBAUX === */
.ws-bp-hov-tilt .ws-bp__card { transition: transform 0.4s ease, box-shadow 0.3s ease; }
.ws-bp-hov-tilt .ws-bp__card:hover { transform: perspective(1000px) rotateX(4deg) rotateY(-4deg) translateY(-3px); }

.ws-bp-hov-zoom .ws-bp__card { transition: transform 0.35s ease; }
.ws-bp-hov-zoom .ws-bp__card:hover .ws-bp__fill-img,
.ws-bp-hov-zoom .ws-bp__card:hover .ws-bp__fill-video { transform: scale(1.08); }

.ws-bp-hov-glow .ws-bp__card { transition: box-shadow 0.3s ease; }
.ws-bp-hov-glow .ws-bp__card:hover {
    box-shadow: 0 0 0 1px var(--ws-bp-hov-color, #6366f1), 0 0 30px -4px var(--ws-bp-hov-color, #6366f1);
}

.ws-bp-hov-border .ws-bp__card {
    position: relative;
    transition: transform 0.3s ease;
}
.ws-bp-hov-border .ws-bp__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--ws-bp-hov-color, #6366f1);
    border-radius: inherit;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 5;
}
.ws-bp-hov-border .ws-bp__card:hover::after {
    opacity: 1;
    transform: scale(1);
}

.ws-bp-hov-shine .ws-bp__card {
    position: relative;
    overflow: hidden;
}
.ws-bp-hov-shine .ws-bp__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, var(--ws-bp-hov-color, rgba(255,255,255,0.4)) 50%, transparent 70%);
    transition: left 0.7s ease;
    z-index: 4;
    pointer-events: none;
}
.ws-bp-hov-shine .ws-bp__card:hover::before {
    left: 130%;
}

.ws-bp-hov-reveal-bg .ws-bp__card { position: relative; }
.ws-bp-hov-reveal-bg .ws-bp__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ws-bp-hov-color, #6366f1);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply;
}
.ws-bp-hov-reveal-bg .ws-bp__card:hover::after { opacity: 0.45; }

.ws-bp-hov-wobble .ws-bp__card { transition: transform 0.4s ease; }
.ws-bp-hov-wobble .ws-bp__card:hover { animation: wsBpWobble 0.6s ease-in-out; }
@keyframes wsBpWobble {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px) rotate(-1deg); }
    75%     { transform: translateX(4px) rotate(1deg); }
}

.ws-bp-hov-rise-bg .ws-bp__card { position: relative; overflow: hidden; }
.ws-bp-hov-rise-bg .ws-bp__card::after {
    content: "";
    position: absolute;
    inset: 100% 0 0 0;
    background: var(--ws-bp-hov-color, #6366f1);
    transition: inset 0.45s cubic-bezier(0.65,0,0.35,1);
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
}
.ws-bp-hov-rise-bg .ws-bp__card:hover::after { inset: 0; }
.ws-bp-hov-rise-bg .ws-bp__card > * { position: relative; z-index: 2; }

/* =========================================================================
   PRESET : MOSAIQUE - bento de fonctionnalites, cellules colorees
   ========================================================================= */
/* v4.9.17 : grid-auto-rows passe de 210px fixe a minmax(240px, auto) pour
   accommoder le bouton sans couper le contenu (regression depuis v4.9.12
   ou les buttons ont ete ajoutes au render Mosaique). */
.ws-bp--mosaique {
    display: grid;
    grid-template-columns: repeat(var(--ws-bp-cols, 4), minmax(0, 1fr));
    grid-auto-rows: minmax(240px, auto);
    grid-auto-flow: dense;
}
/* v4.9.153 : Mosaique = COPIE EXACTE du CSS Magazine (lignes 1933+) avec
   classes renommees 'mag-' -> 'm-'. Seul change visuel : pas de hauteur
   hardcodee par card (Magazine a paysage 210px + portrait 285px ; Mosaique
   utilise grid auto-rows). Tout le reste = identique. */
.ws-bp__card--mosaique {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    min-height: 280px;
}
.ws-bp__card--mosaique .ws-bp__fill-img,
.ws-bp__card--mosaique .ws-bp__fill-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.ws-bp__m-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}
.ws-bp__card--mosaique .ws-bp__media-overlay {
    z-index: 1;
}
.ws-bp__m-content {
    position: relative;
    z-index: 2;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.ws-bp__m-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ws-bp__m-top .ws-bp__eyebrow { margin-bottom: 2px; }
.ws-bp__m-top .ws-bp__m-title { margin: 0 0 6px; }
.ws-bp__m-top .ws-bp__m-text  { margin: 0 0 4px; }
.ws-bp__m-top .ws-bp__list    { margin: 4px 0 0; }
.ws-bp__m-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.ws-bp__m-text {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}
.ws-bp__card--mosaique .ws-bp__list-item,
.ws-bp__card--mosaique .ws-bp__list-text {
    color: rgba(255, 255, 255, 0.88) !important;
}
/* Bouton dans le content -> flex space-between le pousse en bas naturellement.
   align-self:flex-start pour qu'il garde sa largeur naturelle (pas full-width). */
.ws-bp__card--mosaique .ws-bp__btn {
    align-self: flex-start;
    z-index: 3;
}

/* =========================================================================
   GALERIES RUNWAY + SPOTLIGHT - layout fixe par nth-child, image plein cadre
   ========================================================================= */
.ws-bp--runway,
.ws-bp--spotlight {
    display: grid;
}
.ws-bp__card--runway,
.ws-bp__card--spotlight {
    position: relative;
    overflow: hidden;
    min-height: 0;
}
.ws-bp__card--runway img,
.ws-bp__card--runway video,
.ws-bp__card--spotlight img,
.ws-bp__card--spotlight video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Surimpression optionnelle (titre + texte + bouton) sur une image de galerie.
   Voile degrade bas->haut pour la lisibilite. Ne s'affiche que si rempli. */
.ws-bp__g-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    padding: 22px;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.15) 45%,
        rgba(0, 0, 0, 0) 70%);
}
.ws-bp__g-overlay .ws-bp__text {
    margin-top: 2px;
}
.ws-bp__g-overlay .ws-bp__btn {
    margin-top: 12px;
}

/* v4.9.13 : reset btnpos absolute pour TOUS les presets avec flex column.
   Les boutons doivent flow naturellement en bas du content flex, sans
   chevaucher le texte/liste au-dessus (MANIFEST Partie 4.0.1 + 4.0.4).
   Ajoute Mosaique + Atelier qui avaient le bug en v4.9.12. */
.ws-bp__card--runway .ws-bp__btn,
.ws-bp__card--spotlight .ws-bp__btn,
.ws-bp__card--vitrine-hero .ws-bp__btn,
.ws-bp__card--vitrine-item .ws-bp__btn,
.ws-bp__card--petitloft .ws-bp__btn,
.ws-bp__card--mosaique .ws-bp__btn,
.ws-bp__card--mosaiquexl .ws-bp__btn,
.ws-bp__card--concierge .ws-bp__btn,
.ws-bp__card--launchpad .ws-bp__btn {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    align-self: flex-start;
}
/* Centrage flex pour btnpos-bc / tc */
.ws-bp__card--btnpos-bc.ws-bp__card--runway .ws-bp__btn,
.ws-bp__card--btnpos-tc.ws-bp__card--runway .ws-bp__btn,
.ws-bp__card--btnpos-bc.ws-bp__card--spotlight .ws-bp__btn,
.ws-bp__card--btnpos-tc.ws-bp__card--spotlight .ws-bp__btn,
.ws-bp__card--btnpos-bc.ws-bp__card--vitrine-hero .ws-bp__btn,
.ws-bp__card--btnpos-bc.ws-bp__card--vitrine-item .ws-bp__btn { align-self: center; }
.ws-bp__card--btnpos-br.ws-bp__card--runway .ws-bp__btn,
.ws-bp__card--btnpos-tr.ws-bp__card--runway .ws-bp__btn,
.ws-bp__card--btnpos-br.ws-bp__card--spotlight .ws-bp__btn,
.ws-bp__card--btnpos-tr.ws-bp__card--spotlight .ws-bp__btn,
.ws-bp__card--btnpos-br.ws-bp__card--vitrine-hero .ws-bp__btn,
.ws-bp__card--btnpos-br.ws-bp__card--vitrine-item .ws-bp__btn { align-self: flex-end; }

/* v4.9.6 : Petit Loft button pousse en bas du body flex */
.ws-bp__card--petitloft .ws-bp__pl-body .ws-bp__btn,
.ws-bp__card--petitloft .ws-bp__pl-overlay .ws-bp__btn {
    margin-top: auto;
    padding-top: 12px;
}

/* --- RUNWAY : 5 colonnes serrees, hero central qui depasse, colonnes 1/5
   en images empilees, colonnes 2/4 en image unique decalee (style TrendZone). --- */
.ws-bp--runway {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(40, minmax(0, 1fr));
    aspect-ratio: 23 / 10;
}
.ws-bp__card--runway:nth-child(1) { grid-column: 1; grid-row: 3 / 25; }
.ws-bp__card--runway:nth-child(2) { grid-column: 1; grid-row: 25 / 39; }
.ws-bp__card--runway:nth-child(3) { grid-column: 2; grid-row: 6 / 35; }
.ws-bp__card--runway:nth-child(4) { grid-column: 3; grid-row: 1 / 41; }
.ws-bp__card--runway:nth-child(5) { grid-column: 4; grid-row: 6 / 35; }
.ws-bp__card--runway:nth-child(6) { grid-column: 5; grid-row: 3 / 25; }
.ws-bp__card--runway:nth-child(7) { grid-column: 5; grid-row: 25 / 39; }
.ws-bp__card--runway:nth-child(n+8) { grid-column: span 1; grid-row: span 14; }

/* --- SPOTLIGHT : 5 colonnes serrees, hero central + images eparpillees ;
   colonnes 1/5 en image unique decalee, colonnes 2/4 en paire empilee. --- */
.ws-bp--spotlight {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(40, minmax(0, 1fr));
    aspect-ratio: 23 / 10;
}
.ws-bp__card--spotlight:nth-child(1) { grid-column: 1; grid-row: 7 / 29; }
.ws-bp__card--spotlight:nth-child(2) { grid-column: 2; grid-row: 4 / 20; }
.ws-bp__card--spotlight:nth-child(3) { grid-column: 2; grid-row: 21 / 36; }
.ws-bp__card--spotlight:nth-child(4) { grid-column: 3; grid-row: 1 / 41; }
.ws-bp__card--spotlight:nth-child(5) { grid-column: 4; grid-row: 4 / 20; }
.ws-bp__card--spotlight:nth-child(6) { grid-column: 4; grid-row: 21 / 36; }
.ws-bp__card--spotlight:nth-child(7) { grid-column: 5; grid-row: 7 / 29; }
.ws-bp__card--spotlight:nth-child(n+8) { grid-column: span 1; grid-row: span 14; }

/* Galeries : empilement simple sur mobile (le layout art-dirige n'a pas
   de sens sur petit ecran) */
@media (max-width: 767px) {
    .ws-bp--runway,
    .ws-bp--spotlight {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        grid-auto-rows: auto;
        aspect-ratio: auto;
    }
    .ws-bp__card--runway,
    .ws-bp__card--spotlight {
        grid-column: auto !important;
        grid-row: auto !important;
        aspect-ratio: 3 / 4;
    }
}

/* ==========================================================================
   PRESET : MAGAZINE (Lifestyle 6 cards, 2 zones flex)
   Architecture (PAS un grid unique, 2 conteneurs flex cote a cote) :
     .ws-bp--magazine = flex horizontal
       .ws-bp__mag-zone--left  (48%)  = column { coffee(paysage) + row(plants, sugar) }
       .ws-bp__mag-zone--right (flex:1) = column { row(nasa, saharan) + instagram(paysage) }
   Heights : paysage 210px, portrait 285px.
   Couleurs de fond fallback (sans image) :
     coffee=#9db5a8 / nasa=#1a2333 / saharan=#c9a07a /
     plants=#7ab8d4 / sugar=#e89aa5 / instagram=#5b9bd5
   Bouton Read = blanc, couleur texte = couleur card.
   ========================================================================== */

.ws-bp--magazine {
    display: flex;
    gap: 24px;
}

.ws-bp__mag-zone--left {
    flex: 0 0 48%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ws-bp__mag-zone--right {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ws-bp__mag-row {
    display: flex;
    gap: 24px;
}
.ws-bp__mag-row > .ws-bp__card {
    flex: 1 1 0;
    min-width: 0;
}

.ws-bp__card--magazine {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Hauteurs : paysages 210px, portraits 285px */
.ws-bp--magazine .ws-bp__card--mag-coffee,
.ws-bp--magazine .ws-bp__card--mag-instagram {
    height: 210px;
}
.ws-bp--magazine .ws-bp__card--mag-plants,
.ws-bp--magazine .ws-bp__card--mag-sugar,
.ws-bp--magazine .ws-bp__card--mag-nasa,
.ws-bp--magazine .ws-bp__card--mag-saharan {
    height: 285px;
}

/* Pas de couleur hardcodee par card : le fond suit default_card_bg du widget
   (navy par defaut) pour rester coherent avec les autres presets.
   Si user upload une image, l'image override visuellement le fond. */

/* Image de fond plein cadre (override la couleur si user upload) */
.ws-bp__card--magazine .ws-bp__fill-img,
.ws-bp__card--magazine .ws-bp__fill-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Voile leger (haut) pour lisibilite texte blanc sur image */
.ws-bp__mag-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 45%);
    z-index: 1;
    pointer-events: none;
}

/* v4.9.10 : flex column space-between AVEC gap minimum garanti.
   Sans gap, les cards portrait (denses) font coller la liste au bouton.
   Voir MANIFEST §4.0.4 : Liste -> bouton = 12px minimum (ici 18px safety). */
.ws-bp__mag-content {
    position: relative;
    z-index: 2;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.ws-bp__mag-top {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Espacements internes entre eyebrow / titre / desc / liste */
.ws-bp__mag-top .ws-bp__eyebrow,
.ws-bp__mag-top .ws-bp__mag-cat { margin-bottom: 2px; }
.ws-bp__mag-top .ws-bp__mag-title { margin: 0 0 6px; }
.ws-bp__mag-top .ws-bp__text { margin: 0 0 4px; }
.ws-bp__mag-top .ws-bp__list { margin: 4px 0 0; }
/* Items magazine en blanc lisible sur le fond navy */
.ws-bp__mag-content .ws-bp__text,
.ws-bp__mag-content .ws-bp__list-item,
.ws-bp__mag-content .ws-bp__list-text {
    color: rgba(255, 255, 255, 0.88) !important;
    opacity: 1;
}

/* Categorie : version attenuee de la couleur titre (gold faded) */
.ws-bp__mag-cat {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(184, 147, 90, 0.8);
    margin: 0;
}

/* Titre : PAS de couleur hardcodee. default_title_color pilote (gold par defaut)
   via le selecteur additionne dans le PHP (ws-bp__mag-title liste). */
.ws-bp__mag-title {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    margin: 6px 0 0;
}

/* Bouton Read : fond blanc, texte navy (lisible sur blanc, coherent avec le
   fond navy uniforme des cards). v4.9.10 : line-height: 1 + justify-content
   center + padding equilibre pour centrage vertical parfait (MANIFEST §4.0.3). */
.ws-bp__mag-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    background: #ffffff;
    color: #1a1a2e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ws-bp__mag-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Responsive : sous 768px tout passe en colonne unique */
@media (max-width: 768px) {
    .ws-bp--magazine,
    .ws-bp--magazine .ws-bp__mag-zone--left,
    .ws-bp--magazine .ws-bp__mag-zone--right,
    .ws-bp--magazine .ws-bp__mag-row {
        flex-direction: column;
    }
    .ws-bp--magazine .ws-bp__mag-zone--left {
        flex: 1 1 auto;
    }
    .ws-bp--magazine .ws-bp__card--magazine {
        height: auto !important;
        min-height: 240px;
    }
}

/* ==========================================================================
   PRESET : PETIT LOFT (editorial fixe a 5 positions, skyline bottom-aligned)
   Container : max-width 1200px, height 320px,
               grid-template-columns: 1.3fr 1.05fr 1.15fr 1.15fr 1.3fr
   Toutes les cartes alignees en BAS (align-self: end),
   hauteurs decalees : pos1 100% / pos2 75% / pos3 52% / pos4 72% / pos5 100%
   Couleurs (fond / texte / titre) = controles Style du widget
   (default_card_bg, default_text_color, default_title_color) -- on ne surcharge
   PAS au niveau preset, pour que Petit Loft suive le meme theme que les autres
   presets du meme widget.
   ========================================================================== */

.ws-bp--petitloft {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1.3fr);
    gap: var(--ws-bp-gap, 16px);
    align-items: stretch;
    height: 320px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.ws-bp__card--petitloft {
    position: relative;
    overflow: hidden;
    border-radius: var(--ws-bp-card-radius, 16px);
    display: flex;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

/* Hauteurs decalees + bottom-aligned. v4.9.8 : padding reduit a 16px pour
   maximiser l'espace utile sur les cards courtes (3 et 4). */
.ws-bp--petitloft .ws-bp__card--petitloft:nth-child(1) {
    height: 100%;
    align-self: stretch;
    padding: 16px;
}
.ws-bp--petitloft .ws-bp__card--petitloft:nth-child(2) {
    height: 75%;
    align-self: end;
    padding: 0;
}
.ws-bp--petitloft .ws-bp__card--petitloft:nth-child(3) {
    height: 60%;
    align-self: end;
    padding: 16px;
}
.ws-bp--petitloft .ws-bp__card--petitloft:nth-child(3) .ws-bp__pl-body {
    justify-content: center;
}
.ws-bp--petitloft .ws-bp__card--petitloft:nth-child(4) {
    height: 82%;
    align-self: end;
    padding: 16px;
}
.ws-bp--petitloft .ws-bp__card--petitloft:nth-child(5) {
    height: 100%;
    align-self: stretch;
    padding: 0;
}

/* Body texte (text-only / icon-text / title-icon) : flex column, sans padding propre
   (le padding 20px vit sur la card pour eviter double padding). */
.ws-bp--petitloft .ws-bp__pl-body {
    position: relative;
    z-index: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.ws-bp--petitloft .ws-bp__pl-body--center {
    justify-content: center;
    align-items: flex-start;
    text-align: left;
}

/* v4.9.8 : PRINCIPES DE DESIGN PETIT LOFT (cards etroites ~200px).
   Regles strictes (voir MANIFEST Partie 4) :
   1. Titre h3 : font-size EXPLICITE (sinon herite du theme = 32px+ -> wrap).
   2. List items : couleur BLANCHE forcee sur fond sombre (sinon herite couleur
      texte du theme qui devient bleu-grise sur navy = illisible).
   3. Aucun chevauchement : gap minimum 12px entre liste et bouton.
   4. Bouton compact sur cards etroites : padding 5px 10px max, font 10px.
   5. Marges explicites entre eyebrow / titre / desc / liste.
*/
.ws-bp--petitloft .ws-bp__pl-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    word-break: normal;
    overflow-wrap: break-word;
}
.ws-bp--petitloft .ws-bp__pl-desc {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1;
}
.ws-bp--petitloft .ws-bp__eyebrow {
    font-size: 9px;
    margin: 0 0 6px;
    letter-spacing: 1.4px;
}
.ws-bp--petitloft .ws-bp__list {
    margin: 4px 0 12px;
    gap: 4px;
    padding-bottom: 4px;
}
/* Items en BLANC ATTENUE force (sur fond navy le inherit donne du bleu illisible) */
.ws-bp--petitloft .ws-bp__list-item,
.ws-bp--petitloft .ws-bp__list-text {
    font-size: 11px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1;
}
/* Bouton compact + ne touche PAS la liste (margin-top auto + safety margin).
   v4.9.9 : line-height: 1 + padding equilibre pour centrage vertical parfait. */
.ws-bp--petitloft .ws-bp__btn {
    margin-top: 12px;
    padding: 7px 12px;
    font-size: 10px;
    line-height: 1;
    gap: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}
.ws-bp--petitloft .ws-bp__btn:hover {
    transform: translateY(-1px);
}
/* Body en flex column avec gap pour eviter TOUT chevauchement entre elements */
.ws-bp--petitloft .ws-bp__pl-body,
.ws-bp--petitloft .ws-bp__pl-overlay {
    row-gap: 2px;
}

/* Icone du haut (icon-text) : badge subtil neutre, fonctionne sur fond sombre comme clair */
.ws-bp--petitloft .ws-bp__pl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.ws-bp--petitloft .ws-bp__pl-icon--top {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    margin: 0 0 14px;
}
.ws-bp--petitloft .ws-bp__pl-icon--top svg,
.ws-bp--petitloft .ws-bp__pl-icon--top i {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Icone bottom (uniquement si type title-icon : ne s'applique pas par defaut
   sur card 4 puisqu'elle est text-only desormais). XL decorative. */
.ws-bp--petitloft .ws-bp__pl-icon--bottom {
    margin-top: auto;
    align-self: center;
    padding-top: 12px;
}
.ws-bp--petitloft .ws-bp__card--pl-title-icon .ws-bp__pl-icon--bottom svg,
.ws-bp--petitloft .ws-bp__card--pl-title-icon .ws-bp__pl-icon--bottom i {
    font-size: 72px;
    width: 72px;
    height: 72px;
}

/* Image-only / image-overlay : image remplit la card */
.ws-bp--petitloft .ws-bp__card--pl-image-only .ws-bp__fill-img,
.ws-bp--petitloft .ws-bp__card--pl-image-only .ws-bp__fill-video,
.ws-bp--petitloft .ws-bp__card--pl-image-overlay .ws-bp__fill-img,
.ws-bp--petitloft .ws-bp__card--pl-image-overlay .ws-bp__fill-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Image-overlay : voile doux + titre top-left absolute */
.ws-bp--petitloft .ws-bp__card--pl-image-overlay .ws-bp__pl-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 55%);
    z-index: 1;
}
.ws-bp--petitloft .ws-bp__pl-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 20px;
    color: #fff;
}
.ws-bp--petitloft .ws-bp__pl-title--overlay {
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Responsive : 2 colonnes en tablette, 1 en mobile.
   Neutralise hauteurs % + align-self pour empilement propre. */
@media (max-width: 968px) {
    .ws-bp--petitloft {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        height: auto;
        max-width: 100%;
    }
    .ws-bp--petitloft .ws-bp__card--petitloft {
        height: auto !important;
        min-height: 200px;
        align-self: stretch !important;
    }
}
@media (max-width: 600px) {
    .ws-bp--petitloft {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PRESET : MOSAIQUE XL (masonry style Pinterest / Airbnb experiences)
   5 colonnes flex avec margin-top de depart different par colonne pour creer
   le decalage editorial. 2 types de cartes :
   - hero : image / couleur fond + label haut + grand titre bas
   - list : widget blanc avec titre + items + bouton rose
   Responsive : <1024px = 3 cols sans decalage, <640px = 2 cols.
   ========================================================================== */

.ws-bp--mosaiquexl {
    /* Override .ws-bp display:grid. Fond transparent : le widget herite du
       fond Elementor parent (section/colonne) comme les autres presets. */
    display: flex;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.ws-bp__mxl-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* Decalage vertical de depart par colonne (effet collage masonry editorial) */
.ws-bp__mxl-col--1 { margin-top: 150px; }
.ws-bp__mxl-col--2 { margin-top: 40px; }
.ws-bp__mxl-col--3 { margin-top: 0; }
.ws-bp__mxl-col--4 { margin-top: 40px; }
.ws-bp__mxl-col--5 { margin-top: 180px; }

/* === Card commune === */
/* Le fond bleu fonce (#1a1a2e) est pose par .ws-bp__card base + le controle
   "Fond des cards par defaut" (Style). Les cartes sans image affichent ce
   fond. Les cartes avec image l'utilisent en fallback (sous l'image). */
.ws-bp__card--mosaiquexl {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    text-decoration: none;
    isolation: isolate;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* Hauteurs min par taille (defile l'effet masonry) */
.ws-bp__card--mxl-small  { min-height: 150px; }
.ws-bp__card--mxl-medium { min-height: 270px; }
.ws-bp__card--mxl-large  { min-height: 340px; }
.ws-bp__card--mxl-tall   { min-height: 420px; }

/* === HERO : image / couleur + label + titre === */
.ws-bp__card--mxl-hero {
    color: #fff;
}
.ws-bp__card--mxl-hero .ws-bp__fill-img,
.ws-bp__card--mxl-hero .ws-bp__fill-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.6s ease;
}
.ws-bp__card--mxl-hero:hover .ws-bp__fill-img,
.ws-bp__card--mxl-hero:hover .ws-bp__fill-video {
    transform: scale(1.04);
}

.ws-bp__mxl-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, transparent 35%, transparent 60%, rgba(0, 0, 0, 0.62) 100%);
    z-index: 1;
    pointer-events: none;
}

.ws-bp__mxl-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: inherit;
    box-sizing: border-box;
    color: #fff;
}

.ws-bp__mxl-cat {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 6px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    line-height: 1.2;
}

.ws-bp__mxl-spacer {
    flex: 1 1 auto;
    min-height: 8px;
}

/* v4.9.14 : tous les cards MXL sont des Hero uniformes. Le titre va en HAUT
   (juste sous le label), le spacer pousse le contenu (desc/liste/bouton) vers
   le bas pour eviter le centrage gauche. */
.ws-bp__mxl-content {
    justify-content: flex-start;
}
.ws-bp__mxl-spacer {
    order: 2;
}
/* Bouton MXL : utilise le pattern universel .ws-bp__btn, align-self left */
.ws-bp__mxl-content .ws-bp__btn {
    margin-top: 14px;
    align-self: flex-start;
    order: 99;
}

.ws-bp__mxl-title {
    font-size: clamp(20px, 1.7vw, 28px);
    line-height: 1.05;
    font-weight: 800;
    margin: 0;
    /* Couleur or par defaut, alignee sur les autres presets bento.
       Surchargee par le controle "Couleur titres" (default_title_color)
       qui cible .ws-bp__title et .ws-bp__pl-title. */
    color: #b8935a;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* v4.9.14 : type 'list' SUPPRIME du preset MosaiqueXL.
   Anciennement les classes .ws-bp__mxl-list, .ws-bp__mxl-item*, .ws-bp__mxl-btn
   stylaient un widget liste blanc. Plus rendues par le PHP (uniformisation
   Hero pour toutes les cards). CSS supprime ici pour eviter le bloat. */

/* === Responsive === */
@media (max-width: 1024px) {
    .ws-bp--mosaiquexl { flex-wrap: wrap; }
    .ws-bp__mxl-col {
        flex: 0 0 calc((100% - 32px) / 3);
        margin-top: 0 !important;
    }
}
@media (max-width: 640px) {
    .ws-bp__mxl-col {
        flex: 0 0 calc((100% - 16px) / 2);
    }
    .ws-bp__card--mxl-tall  { min-height: 320px; }
    .ws-bp__card--mxl-large { min-height: 280px; }
}

/* ======================================================================
   v4.7.2 : Card universelle Atelier (rendu sans switch atelier_type)
   Stat positionne absolute via class .ws-bp__card--stat-pos-X
   ====================================================================== */
.ws-bp--atelier .ws-bp__card--universal {
    position: relative;
    overflow: hidden;
}
/* Stat centre par defaut : layout flex centre */
.ws-bp__card--stat-pos-c {
    align-items: center;
    justify-content: center;
}
.ws-bp__card--stat-pos-c .ws-bp__stat {
    text-align: center;
    /* prend la place du content centre */
}
/* Stat aux 4 coins : absolute */
.ws-bp__card--has-stat:not(.ws-bp__card--stat-pos-c) .ws-bp__stat {
    position: absolute;
    z-index: 5;
    margin: 0;
    line-height: 1;
}
.ws-bp__card--stat-pos-tl .ws-bp__stat { top: 20px; left: 20px; }
.ws-bp__card--stat-pos-tr .ws-bp__stat { top: 20px; right: 20px; }
.ws-bp__card--stat-pos-bl .ws-bp__stat { bottom: 20px; left: 20px; }
.ws-bp__card--stat-pos-br .ws-bp__stat { bottom: 20px; right: 20px; }
/* v4.7.4 : centre haut + centre bas (translate -50% pour centrer X) */
.ws-bp__card--stat-pos-tc .ws-bp__stat {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.ws-bp__card--stat-pos-bc .ws-bp__stat {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
/* Anti-superposition padding pour tc/bc (idem tl/tr et bl/br) */
.ws-bp__card--stat-pos-tc { padding-top: 80px !important; }
.ws-bp__card--stat-pos-bc { padding-bottom: 80px !important; }

/* ======================================================================
   v4.7.3 : Anti-superposition stat / content / bouton
   Quand stat est positionne aux coins, on reserve l'espace via padding sur
   la card pour que le content (titre/texte) ne se superpose pas.
   ====================================================================== */
.ws-bp__card--stat-pos-tl,
.ws-bp__card--stat-pos-tr {
    padding-top: 80px !important;
}
.ws-bp__card--stat-pos-bl,
.ws-bp__card--stat-pos-br {
    padding-bottom: 80px !important;
}
/* Stat centre : flow normal flex column, content + stat empiles verticalement */
.ws-bp__card--stat-pos-c {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}
.ws-bp__card--stat-pos-c .ws-bp__content {
    width: 100%;
    text-align: center;
    margin-bottom: 12px;
}
.ws-bp__card--stat-pos-c .ws-bp__stat {
    position: static;
    margin: 0;
}

/* Combine stat + bouton : si stat-pos en bas + bouton (qui est tjs absolute) :
   l'anti-overlap PHP relocate deja le stat. Mais on garde un padding-bottom max
   pour les cas non-conflits (stat bl + btn br par exemple). Le padding card
   est cumule (max) entre stat reservation et btn reservation. */
.ws-bp__card--stat-pos-bl[class*="ws-bp__card--btnpos-b"],
.ws-bp__card--stat-pos-br[class*="ws-bp__card--btnpos-b"] {
    padding-bottom: 80px !important;
}
.ws-bp__card--stat-pos-tl[class*="ws-bp__card--btnpos-t"],
.ws-bp__card--stat-pos-tr[class*="ws-bp__card--btnpos-t"] {
    padding-top: 80px !important;
}

/* v4.9.x : titre popup "Au-dessus du texte" (rendu DANS la colonne texte
   du contenu text_image / video_text). Le titre natif ws-scpop-modal__title
   a un padding 32px/40px/8px pour le placer en haut de la modal ; ici on le
   reset pour qu'il s'aligne sur le texte de sa colonne. */
.ws-bp-modal .ws-scpop-modal__title--inline {
    padding: 0;
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.25;
}

/* =============================================================
   v4.9.x : Position du content (titre + texte) per-card (9 positions).
   Studio JS : card_content_pos. PHP open_card_tag : classe
   .ws-bp__card--contentpos-{tl|tc|tr|cl|cc|cr|bl|bc|br}.

   La card est deja position:relative (regle de base). On positionne le
   wrapper content en absolute selon la classe. Selecteur couvre les
   variantes par preset : .ws-bp__content (generique), .ws-bp__mag-content
   (magazine), .ws-bp__concierge-overlay (concierge), .ws-bp__pl-overlay
   (petitloft), .ws-bp__overlay (autre).
   ============================================================= */
[class*="ws-bp__card--contentpos-"] > .ws-bp__content,
[class*="ws-bp__card--contentpos-"] > .ws-bp__mag-content,
[class*="ws-bp__card--contentpos-"] > .ws-bp__concierge-overlay,
[class*="ws-bp__card--contentpos-"] > .ws-bp__pl-overlay,
[class*="ws-bp__card--contentpos-"] > .ws-bp__overlay {
    position: absolute;
    z-index: 2;
    max-width: calc(100% - 32px);
    margin: 0;
    /* CRITIQUE : override des dimensions des presets natifs.
       .ws-bp__mag-content a width:100%; height:100% qui ferait remplir
       toute la card -> ancrage coin invisible. On force width/height
       auto pour que le bloc shrink-to-fit a son contenu. */
    width: auto;
    height: auto;
    /* Magazine a justify-content: space-between qui distribue le contenu
       sur toute la hauteur. On le neutralise pour que tout reste groupe. */
    justify-content: flex-start;
}

/* Coin haut gauche */
.ws-bp__card--contentpos-tl > .ws-bp__content,
.ws-bp__card--contentpos-tl > .ws-bp__mag-content,
.ws-bp__card--contentpos-tl > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-tl > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-tl > .ws-bp__overlay {
    top: 16px; left: 16px; right: auto; bottom: auto; text-align: left;
}
/* Haut centre */
.ws-bp__card--contentpos-tc > .ws-bp__content,
.ws-bp__card--contentpos-tc > .ws-bp__mag-content,
.ws-bp__card--contentpos-tc > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-tc > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-tc > .ws-bp__overlay {
    top: 16px; left: 50%; right: auto; bottom: auto;
    transform: translateX(-50%); text-align: center;
}
/* Haut droite */
.ws-bp__card--contentpos-tr > .ws-bp__content,
.ws-bp__card--contentpos-tr > .ws-bp__mag-content,
.ws-bp__card--contentpos-tr > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-tr > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-tr > .ws-bp__overlay {
    top: 16px; right: 16px; left: auto; bottom: auto; text-align: right;
}
/* Centre gauche */
.ws-bp__card--contentpos-cl > .ws-bp__content,
.ws-bp__card--contentpos-cl > .ws-bp__mag-content,
.ws-bp__card--contentpos-cl > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-cl > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-cl > .ws-bp__overlay {
    top: 50%; left: 16px; right: auto; bottom: auto;
    transform: translateY(-50%); text-align: left;
}
/* Centre milieu */
.ws-bp__card--contentpos-cc > .ws-bp__content,
.ws-bp__card--contentpos-cc > .ws-bp__mag-content,
.ws-bp__card--contentpos-cc > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-cc > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-cc > .ws-bp__overlay {
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%); text-align: center;
}
/* Centre droite */
.ws-bp__card--contentpos-cr > .ws-bp__content,
.ws-bp__card--contentpos-cr > .ws-bp__mag-content,
.ws-bp__card--contentpos-cr > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-cr > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-cr > .ws-bp__overlay {
    top: 50%; right: 16px; left: auto; bottom: auto;
    transform: translateY(-50%); text-align: right;
}
/* Bas gauche */
.ws-bp__card--contentpos-bl > .ws-bp__content,
.ws-bp__card--contentpos-bl > .ws-bp__mag-content,
.ws-bp__card--contentpos-bl > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-bl > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-bl > .ws-bp__overlay {
    bottom: 16px; left: 16px; right: auto; top: auto; text-align: left;
}
/* Bas centre */
.ws-bp__card--contentpos-bc > .ws-bp__content,
.ws-bp__card--contentpos-bc > .ws-bp__mag-content,
.ws-bp__card--contentpos-bc > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-bc > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-bc > .ws-bp__overlay {
    bottom: 16px; left: 50%; right: auto; top: auto;
    transform: translateX(-50%); text-align: center;
}
/* Bas droite */
.ws-bp__card--contentpos-br > .ws-bp__content,
.ws-bp__card--contentpos-br > .ws-bp__mag-content,
.ws-bp__card--contentpos-br > .ws-bp__concierge-overlay,
.ws-bp__card--contentpos-br > .ws-bp__pl-overlay,
.ws-bp__card--contentpos-br > .ws-bp__overlay {
    bottom: 16px; right: 16px; left: auto; top: auto; text-align: right;
}