/* ============================================================ Bento Grid Builder — Frontend CSS NB : grid-template-columns/rows/areas ne sont PAS définis ici. Ils sont injectés par wp_add_inline_style() dans le via la méthode render() du widget, ciblant l'ID unique du widget Elementor. Cela garantit la persistance après tout hard refresh ou régénération Elementor. ============================================================ */ .bgb-wrapper { width:100%; position:relative; } .bgb-grid { display:grid; width:100%; } /* ── Items ── */ .bgb-item { position:relative; overflow:hidden; min-height:200px; transition:transform 0.35s ease, box-shadow 0.35s ease; will-change:transform; } .bgb-item__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 0.35s ease; display:block; will-change:transform; } .bgb-item__overlay { position:absolute; inset:0; pointer-events:none; z-index:1; } /* ── grid-area sur les items (utilisé par le content_template JS de l'éditeur) */ .bgb-grid .bgb-item--a { grid-area:a; } .bgb-grid .bgb-item--b { grid-area:b; } .bgb-grid .bgb-item--c { grid-area:c; } .bgb-grid .bgb-item--d { grid-area:d; } .bgb-grid .bgb-item--e { grid-area:e; } .bgb-grid .bgb-item--f { grid-area:f; } /* ── Caption ── */ .bgb-item__caption { color:#fff; position:absolute; bottom:0; left:0; right:0; padding:16px 20px; z-index:2; background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%); } .bgb-item__caption.is-glass { background:rgba(255,255,255,0.15); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,0.2); padding:14px 20px; } .bgb-item__title { margin:0 0 4px; font-size:1rem; font-weight:600; color:inherit; line-height:1.3; } .bgb-item__desc { margin:0; font-size:0.82rem; color:inherit; opacity:0.85; line-height:1.4; } a.bgb-item { display:block; text-decoration:none; cursor:pointer; } /* ── Hover Effects (PRO) ── */ .bgb-wrapper[data-hover="zoom"] .bgb-item:hover .bgb-item__img, .bgb-wrapper[data-hover="zoom-lift"] .bgb-item:hover .bgb-item__img { transform:scale(var(--bgb-zoom-scale, 1.05)); } .bgb-wrapper[data-hover="lift"] .bgb-item:hover, .bgb-wrapper[data-hover="zoom-lift"] .bgb-item:hover { box-shadow:0 16px 40px rgba(0,0,0,0.28), 0 6px 16px rgba(0,0,0,0.18); transform:translateY(-4px); z-index:2; } /* ── Slider Controls ── */ .bgb-slider-controls { display:none; justify-content:flex-end; gap:8px; margin-bottom:8px; } .bgb-slider-prev, .bgb-slider-next { background:rgba(0,0,0,0.7); color:#fff; border:none; border-radius:50%; width:36px; height:36px; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; } .bgb-slider-prev:hover, .bgb-slider-next:hover { background:rgba(0,0,0,0.9); } /* ── Responsive Mobile ── */ /* ── Carousel centré (PRO) — actif sur tous les écrans ── */ .bgb-wrapper[data-mobile="carousel"] { overflow:hidden; position:relative; } .bgb-wrapper[data-mobile="carousel"] .bgb-grid { display:flex !important; flex-wrap:nowrap; align-items:center; grid-template-areas:unset !important; padding:12px 0; will-change:transform; } .bgb-wrapper[data-mobile="carousel"] .bgb-item { flex:0 0 72%; min-width:72%; grid-area:auto !important; transition: transform 0.45s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.45s cubic-bezier(0.25,0.46,0.45,0.94); transform-origin:center center; } .bgb-wrapper[data-mobile="carousel"] .bgb-item.bgb-carousel--center { transform:scale(1); opacity:1; z-index:2; } .bgb-wrapper[data-mobile="carousel"] .bgb-item.bgb-carousel--side { transform:scale(0.88); opacity:0.55; z-index:1; } .bgb-wrapper[data-mobile="carousel"] .bgb-item.bgb-carousel--far { transform:scale(0.80); opacity:0.28; z-index:0; } /* ── Dots ── */ .bgb-carousel-dots { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:10px; padding:0 16px; } .bgb-carousel-dots .bgb-dot { width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,0.2); cursor:pointer; transition:width 0.3s ease, border-radius 0.3s ease, background 0.3s ease; } .bgb-carousel-dots .bgb-dot.is-active { width:18px; border-radius:3px; background:rgba(0,0,0,0.65); } @media (prefers-color-scheme:dark) { .bgb-carousel-dots .bgb-dot { background:rgba(255,255,255,0.25); } .bgb-carousel-dots .bgb-dot.is-active { background:rgba(255,255,255,0.85); } } /* ── Responsive Mobile (autres modes) ── */ @media (max-width:767px) { .bgb-wrapper[data-mobile="single-col"] .bgb-grid, .bgb-wrapper:not([data-mobile]) .bgb-grid { grid-template-columns:1fr !important; grid-template-rows:auto !important; grid-template-areas:unset !important; } .bgb-wrapper[data-mobile="single-col"] .bgb-item, .bgb-wrapper:not([data-mobile]) .bgb-item { grid-area:auto !important; grid-column:auto !important; grid-row:auto !important; } .bgb-wrapper[data-mobile="two-col"] .bgb-grid { grid-template-columns:1fr 1fr !important; grid-template-rows:auto !important; grid-template-areas:unset !important; } .bgb-wrapper[data-mobile="two-col"] .bgb-item { grid-area:auto !important; grid-column:auto !important; grid-row:auto !important; } .bgb-wrapper[data-mobile="slider"] { overflow:hidden; position:relative; } .bgb-wrapper[data-mobile="slider"] .bgb-slider-controls { display:flex; } .bgb-wrapper[data-mobile="slider"] .bgb-grid { display:flex !important; flex-wrap:nowrap; transition:transform 0.35s ease; grid-template-areas:unset !important; } .bgb-wrapper[data-mobile="slider"] .bgb-item { flex:0 0 85%; min-width:85%; grid-area:auto !important; } .bgb-wrapper[data-mobile="slider"] .bgb-item + .bgb-item { margin-left:12px; } }