/* OW Builder — frontend atomic CSS (chargé admin-canvas + public) */

:root {
  --owb-c-bg:#ffffff; --owb-c-fg:#0f172a;
  --owb-c-primary:#0f172a; --owb-c-primary-hover:#1e293b; --owb-c-primary-fg:#ffffff;
  --owb-c-accent:#3b82f6; --owb-c-muted:#64748b; --owb-c-border:#e2e8f0; --owb-c-surface:#f8fafc;
  --owb-radius-sm:.25rem; --owb-radius-md:.5rem; --owb-radius-lg:1rem;
  --owb-container:1200px;
  --owb-font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --owb-shadow-sm:0 1px 2px rgb(0 0 0 / .05);
  --owb-shadow-md:0 4px 6px -1px rgb(0 0 0 / .1);
  --owb-shadow-lg:0 10px 20px -5px rgb(0 0 0 / .1);
}

.owb, .owb * { box-sizing: border-box; }

.owb-section { position: relative; }
.owb-container { padding: 0 1.5rem; }

.owb-h1 { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 .5em; }
.owb-h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); line-height: 1.15; letter-spacing: -0.01em; font-weight: 700; margin: 0 0 .5em; }
.owb-h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.3; font-weight: 700; margin: 0 0 .5em; }
.owb-h4 { font-size: 1.125rem; font-weight: 700; margin: 0 0 .5em; }
.owb-h5 { font-size: 1rem; font-weight: 700; margin: 0 0 .5em; }
.owb-h6 { font-size: .875rem; font-weight: 700; margin: 0 0 .5em; }

.owb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .85rem 1.5rem;
  font-family: var(--owb-font-sans); font-weight: 600; font-size: .9375rem; line-height: 1;
  border-radius: var(--owb-radius-md); text-decoration: none; cursor: pointer;
  transition: all .18s cubic-bezier(.2,.8,.2,1); border: 1px solid transparent;
}
.owb-btn-sm { padding: .5rem 1rem; font-size: .8125rem; }
.owb-btn-lg { padding: 1.1rem 2rem; font-size: 1.0625rem; }
.owb-btn:hover { transform: translateY(-2px); box-shadow: var(--owb-shadow-md); }
.owb-btn-primary { background: var(--owb-c-primary); color: var(--owb-c-primary-fg); }
.owb-btn-primary:hover { background: var(--owb-c-primary-hover); color: var(--owb-c-primary-fg); }
.owb-btn-outline { background: transparent; color: var(--owb-c-primary); border-color: var(--owb-c-border); }
.owb-btn-outline:hover { background: var(--owb-c-surface); border-color: var(--owb-c-primary); }
.owb-btn-ghost { background: transparent; color: var(--owb-c-primary); }
.owb-btn-ghost:hover { background: var(--owb-c-surface); }

.owb-columns { align-items: stretch; }

/* Animations d'entrée (scroll-triggered via JS) */
.owb-animate { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.owb-animate[data-owb-animate="fade"]        { }
.owb-animate[data-owb-animate="slide-up"]    { transform: translateY(30px); }
.owb-animate[data-owb-animate="slide-down"]  { transform: translateY(-30px); }
.owb-animate[data-owb-animate="slide-left"]  { transform: translateX(30px); }
.owb-animate[data-owb-animate="slide-right"] { transform: translateX(-30px); }
.owb-animate[data-owb-animate="zoom-in"]     { transform: scale(0.9); }
.owb-animate[data-owb-animate="zoom-out"]    { transform: scale(1.1); }
.owb-animate[data-owb-animate="bounce"]      { transform: translateY(-20px); }
.owb-animate[data-owb-animate="flip"]        { transform: perspective(400px) rotateY(90deg); }
.owb-animate.owb-animated { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .owb-animate { opacity: 1; transform: none; transition: none; }
}

/* Hover effects */
.owb-hover-lift   { transition: transform .25s ease, box-shadow .25s ease; }
.owb-hover-lift:hover   { transform: translateY(-6px); box-shadow: 0 20px 30px -10px rgba(0,0,0,0.15); }
.owb-hover-scale  { transition: transform .25s ease; }
.owb-hover-scale:hover  { transform: scale(1.03); }
.owb-hover-shadow { transition: box-shadow .25s ease; }
.owb-hover-shadow:hover { box-shadow: 0 15px 40px -10px rgba(15,23,42,0.2); }
.owb-hover-tilt   { transition: transform .3s ease; transform-style: preserve-3d; }
.owb-hover-tilt:hover   { transform: perspective(600px) rotateX(4deg) rotateY(-4deg); }
.owb-hover-glow   { transition: box-shadow .25s ease; }
.owb-hover-glow:hover   { box-shadow: 0 0 0 4px rgba(59,130,246,0.15), 0 0 30px rgba(59,130,246,0.3); }

/* Visibility par breakpoint */
.owb-hide-desktop { display: none !important; }
@media (max-width: 1023px) { .owb-hide-desktop { display: initial !important; } }
@media (min-width: 481px) and (max-width: 1023px) { .owb-hide-tablet { display: none !important; } }
@media (max-width: 480px)  { .owb-hide-mobile { display: none !important; } }

/* Slider (light) */
.owb-slider { position: relative; overflow: hidden; }
.owb-slider-track { display: flex; transition: transform .5s ease; }
.owb-slider-slide { flex: 0 0 100%; min-width: 0; }
.owb-slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(15,23,42,0.8); color: #fff; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.owb-slider-prev { left: 10px; } .owb-slider-next { right: 10px; }
.owb-slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.owb-slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; }
.owb-slider-dot.active { background: #fff; width: 24px; border-radius: 4px; }

/* Before/After */
.owb-ba { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.owb-ba img { display: block; width: 100%; }
.owb-ba-after { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; }
.owb-ba-after img { width: calc(100% / 0.5); max-width: none; }
.owb-ba-handle { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; left: 50%; cursor: ew-resize; box-shadow: 0 0 10px rgba(0,0,0,0.4); }
.owb-ba-handle::before { content: '↔'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: #0f172a; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }

/* Sticky CTA */
.owb-sticky-cta { position: fixed; bottom: 20px; right: 20px; z-index: 9998; box-shadow: 0 10px 30px rgba(15,23,42,0.2); }

/* Notification bar */
.owb-notif-bar { position: sticky; top: 0; z-index: 9997; text-align: center; padding: .75rem 1rem; font-size: .9375rem; font-weight: 500; }
.owb-notif-bar button.owb-notif-close { background: transparent; border: none; color: inherit; font-size: 1rem; cursor: pointer; margin-left: .75rem; opacity: .6; }

/* Cookie banner */
.owb-cookie { position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 520px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1rem 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,0.1); z-index: 9996; }