/* Naïa Orbe — gamelle à lécher rotative. Complète naia-product.css (mêmes tokens). */

/* ---------- Hero : promesse, pastilles, coloris, adéquation ---------- */
.orbe-tagline{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(19px,2.2vw,23px);color:var(--teal);margin:0 0 16px}
.orbe-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.orbe-chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 9px;border-radius:100px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--ink)}
.orbe-chips li i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(8,118,111,.1)}
.orbe-chips svg{width:13px;height:13px;stroke:var(--teal)}
.orbe-colors{display:flex;align-items:center;gap:10px;margin:4px 0 2px;flex-wrap:wrap}
.orbe-colors > span{font-size:14px;color:var(--muted)}
.orbe-colors > span b{color:var(--ink)}
.orbe-sw{width:34px;height:34px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px var(--line);cursor:pointer;padding:0;position:relative;transition:box-shadow .15s}
.orbe-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--teal)}
.orbe-sw::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#f5b82e;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.orbe-sw[data-color="Bleu"]{background:#4fb6e3}
.orbe-sw[data-color="Jaune"]{background:#f2b632}
.orbe-sw:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.orbe-fit{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border-radius:14px;background:rgba(232,168,124,.14);font-size:13.5px;line-height:1.45}
.orbe-fit svg{flex:0 0 18px;width:18px;height:18px;stroke:var(--ink);margin-top:1px}
.bundle .unit{display:block;font-size:12px;color:var(--muted);font-weight:500;text-align:right}

/* ---------- Moment « wow » vidéo ---------- */
.orbe-wow{background:var(--ink);color:#fff;padding:0;overflow:hidden}
.orbe-wow .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:64px;padding-bottom:64px}
.orbe-wow video{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:26px;display:block;background:#1f3340;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.orbe-wow .eyebrow{color:#8CE8E0}
.orbe-wow h2{color:#fff;font-size:clamp(30px,4vw,48px);line-height:1.05;margin:12px 0 16px}
.orbe-wow p{color:rgba(255,255,255,.78);font-size:17px;max-width:38ch;margin:0 0 26px}
.orbe-spin{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:14.5px;color:#fff}
.orbe-spin i{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe08a,#f5b82e 60%,#d9951a);box-shadow:0 0 0 7px rgba(79,182,227,.35);animation:orbeSpin 3.2s linear infinite;position:relative}
.orbe-spin i::after{content:"";position:absolute;top:8px;left:12px;width:9px;height:5px;border-radius:50%;background:rgba(255,255,255,.75)}
@keyframes orbeSpin{to{transform:rotate(360deg)}}

/* ---------- Avant / Après (curseur à glisser) ---------- */
.orbe-ba-tabs{display:flex;justify-content:center;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.orbe-ba-tabs button,.orbe-moments button{font:inherit;font-weight:700;font-size:14.5px;padding:10px 18px;border-radius:100px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.15s}
.orbe-ba-tabs button[aria-selected="true"],.orbe-moments button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.orbe-ba{position:relative;max-width:760px;margin:0 auto;aspect-ratio:4/3;border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);background:#e9e2d6;user-select:none;touch-action:pan-y}
.orbe-ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orbe-ba .before{clip-path:inset(0 calc(100% - var(--p,50%)) 0 0)}
.orbe-ba .before img{filter:saturate(.35) brightness(.92)}
.orbe-ba .line{position:absolute;top:0;bottom:0;left:var(--p,50%);width:3px;margin-left:-1.5px;background:#fff;pointer-events:none}
.orbe-ba .knob{position:absolute;top:50%;left:var(--p,50%);width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.25);display:grid;place-items:center;pointer-events:none;font-weight:800;color:var(--ink);font-size:17px;letter-spacing:-2px}
.orbe-ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.orbe-ba .tag{position:absolute;bottom:16px;padding:8px 14px;border-radius:100px;font-size:13px;font-weight:800;letter-spacing:.02em;pointer-events:none}
.orbe-ba .tag.b{left:16px;background:rgba(46,71,86,.85);color:#fff}
.orbe-ba .tag.a{right:16px;background:#fff;color:var(--teal)}
.orbe-ba-cap{text-align:center;max-width:52ch;margin:18px auto 0;color:var(--muted);font-size:15.5px}
.orbe-ba-cap b{color:var(--ink)}

/* ---------- Sélecteur « Pour quel moment ? » ---------- */
.orbe-moments{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0 0 26px}
.orbe-moment{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:var(--shadow)}
.orbe-moment figure{margin:0;aspect-ratio:1/1;background:#eee}
.orbe-moment figure img{width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.orbe-moment .mt{padding:40px 42px;display:flex;flex-direction:column;justify-content:center}
.orbe-moment h3{font-size:clamp(24px,2.6vw,32px);line-height:1.1;margin:10px 0 12px}
.orbe-moment p{color:var(--muted);font-size:16px;margin:0 0 22px}
.orbe-garn{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--cream);font-size:14.5px}
.orbe-garn i{flex:0 0 36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe08a,#f5b82e 65%);box-shadow:0 0 0 5px rgba(79,182,227,.25)}
.orbe-garn small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}

/* ---------- Chat & chien ---------- */
.orbe-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:960px;margin:0 auto}
.orbe-duo figure{margin:0;position:relative;border-radius:24px;overflow:hidden;aspect-ratio:1/1}
.orbe-duo img{width:100%;height:100%;object-fit:cover}
.orbe-duo figcaption{position:absolute;left:14px;bottom:14px;background:#fff;padding:7px 14px;border-radius:100px;font-weight:800;font-size:14px}
.orbe-duo-cta{text-align:center;margin-top:26px}
.orbe-duo-cta p{color:var(--muted);margin:0 0 14px;font-size:16px}

/* ---------- Garnitures ---------- */
.orbe-fill{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:960px;margin:0 auto}
.orbe-fill div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 18px}
.orbe-fill b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:17px;margin:12px 0 4px}
.orbe-fill small{color:var(--muted);font-size:13.5px}
.orbe-fill span{display:block;width:34px;height:34px;border-radius:50%}
.orbe-avoid{max-width:960px;margin:14px auto 0;font-size:13.5px;color:var(--muted);text-align:center}
.orbe-avoid b{color:#b4432f}

/* ---------- Dans la boîte ---------- */
.orbe-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;max-width:960px;margin:0 auto}
.orbe-box img{width:100%;border-radius:24px;display:block;box-shadow:var(--shadow)}
.orbe-box ol{list-style:none;padding:0;margin:18px 0 0;counter-reset:b}
.orbe-box li{counter-increment:b;display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.orbe-box li::before{content:counter(b);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--teal);min-width:18px}
.orbe-box li small{display:block;color:var(--muted);font-size:13.5px}

/* ---------- CTA final plein cadre ---------- */
.orbe-final{position:relative;border-radius:30px;overflow:hidden;max-width:1100px;margin:0 auto;min-height:440px;display:flex;align-items:flex-end}
.orbe-final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.orbe-final::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,71,86,.92) 0%,rgba(46,71,86,.55) 45%,rgba(46,71,86,0) 75%);z-index:1}
.orbe-final .in{position:relative;z-index:2;padding:48px;max-width:520px;color:#fff}
.orbe-final h2{color:#fff;font-size:clamp(30px,4vw,46px);line-height:1.05;margin:10px 0 14px}
.orbe-final p{color:rgba(255,255,255,.82);margin:0 0 22px;font-size:16px}
.orbe-final .eyebrow{color:#8CE8E0}
.orbe-final .g{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.85)}

/* ---------- Ventes croisées ---------- */
.orbe-x{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:0 auto}
.orbe-x a{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:12px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.orbe-x a:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.orbe-x img{width:78px;height:78px;border-radius:14px;object-fit:cover;flex:0 0 78px}
.orbe-x b{display:block;font-size:15px}
.orbe-x small{color:var(--muted);font-size:13px}

@media(max-width:860px){
  .orbe-wow .wrap{grid-template-columns:1fr;gap:28px;padding-top:44px;padding-bottom:48px}
  .orbe-wow .txt{order:-1;text-align:center}
  .orbe-wow p{margin-left:auto;margin-right:auto}
  .orbe-moment{grid-template-columns:1fr}
  .orbe-moment .mt{padding:24px 22px 26px}
  .orbe-moments,.orbe-ba-tabs{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .orbe-moments::-webkit-scrollbar,.orbe-ba-tabs::-webkit-scrollbar{display:none}
  .orbe-moments button,.orbe-ba-tabs button{flex:0 0 auto}
  .orbe-ba{aspect-ratio:1/1;border-radius:20px}
  .orbe-fill{grid-template-columns:1fr 1fr}
  .orbe-box{grid-template-columns:1fr;gap:22px}
  .orbe-final{min-height:520px;border-radius:22px}
  .orbe-final::before{background:linear-gradient(0deg,rgba(46,71,86,.95) 0%,rgba(46,71,86,.6) 50%,rgba(46,71,86,0) 80%)}
  .orbe-final .in{padding:28px 22px}
  .orbe-x{grid-template-columns:1fr}
}
@media(max-width:420px){.orbe-duo{gap:8px}.orbe-duo figcaption{font-size:12.5px;left:8px;bottom:8px}}
@media(prefers-reduced-motion:reduce){.orbe-spin i{animation:none}}