Barres de navigation en verre

<div class="scene">
  <div class="tv">
    <div class="tv-glow"></div>

    <!-- 1. Onglets texte : l'onglet actif se détache en pilule bleue -->
    <nav class="seg" id="seg" aria-label="Main">
      <span class="seg-bg glass" data-bg="a"></span>
      <span class="seg-bg glass" data-bg="b"></span>
      <span class="seg-bg active-bg" data-bg="active"></span>
      <button type="button" class="seg-item">Home</button>
      <button type="button" class="seg-item is-active">Cart</button>
      <button type="button" class="seg-item">About</button>
      <button type="button" class="seg-item">Services</button>
    </nav>

    <!-- 2. Icônes : l'icône active s'ouvre en pilule verte avec son nom -->
    <div class="row">
      <nav class="pill-bar glass" id="pillBar" aria-label="Shortcuts">
        <span class="pill-indicator" id="pillIndicator"></span>
        <button type="button" class="pill-item is-active" data-label="Home">
          <svg viewBox="0 0 24 24"><path class="fill" d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" /></svg><span>Home</span>
        </button>
        <button type="button" class="pill-item" data-label="Search">
          <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg><span>Search</span>
        </button>
        <button type="button" class="pill-item" data-label="Saved">
          <svg viewBox="0 0 24 24"><path class="fill" d="M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7.5 2.8C19.5 15.4 12 20 12 20z" /></svg><span>Saved</span>
        </button>
        <button type="button" class="pill-item" data-label="Alerts">
          <svg viewBox="0 0 24 24"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z" /><path d="M10 21h4" /></svg><span>Alerts</span>
        </button>
      </nav>

      <button type="button" class="cart glass" id="cart" aria-label="Cart">
        <svg viewBox="0 0 24 24"><path d="M3 4h2l2.2 10.2a1 1 0 0 0 1 .8h8.9a1 1 0 0 0 1-.8L20 8H6" /><circle cx="9" cy="19" r="1.4" /><circle cx="17" cy="19" r="1.4" /></svg>
        <b class="badge" id="badge">3</b>
      </button>
    </div>
  </div>

  <div class="console"></div>

  <!-- 3. Dock : un creux arrondi suit l'élément actif, l'icône flotte dans une bulle -->
  <nav class="dock" id="dock" aria-label="Dock">
    <div class="dock-bar"></div>
    <span class="dock-bubble" id="dockBubble"></span>
    <div class="dock-items">
      <button type="button" class="dock-item is-active" aria-label="Home"><svg viewBox="0 0 24 24"><path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z" /></svg></button>
      <button type="button" class="dock-item" aria-label="Favorites"><svg viewBox="0 0 24 24"><path d="M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7a4.3 4.3 0 0 1 7.5 2.8C19.5 15.4 12 20 12 20z" /></svg></button>
      <button type="button" class="dock-item" aria-label="Add"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" /><path d="M12 8v8M8 12h8" /></svg></button>
      <button type="button" class="dock-item" aria-label="Profile"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" /><path d="M4.5 21a7.5 7.5 0 0 1 15 0" /></svg></button>
      <button type="button" class="dock-item" aria-label="Notifications"><svg viewBox="0 0 24 24"><path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z" /><path d="M10 21h4" /></svg></button>
    </div>
    <span class="dock-line"></span>
  </nav>
</div>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

* { box-sizing: border-box; }

@property --x {
  syntax: "<length>";
  initial-value: 42px;
  inherits: true;
}

:root {
  --ease: cubic-bezier(.3, 1.35, .45, 1);   /* léger rebond, comme un ressort */
  --mint: #5fd3a6;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #1a120c;
  font-family: "Poppins", "Inter", system-ui, sans-serif;
  color: #fff;
}

.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }

button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Décor : mur chaud, TV, meuble ---------- */
.scene {
  position: relative;
  width: min(760px, 100vw);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 70px;
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255, 196, 140, .22), transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 30%, rgba(255, 176, 110, .16), transparent 70%),
    linear-gradient(180deg, #d9c6b0 0%, #bfa78c 55%, #8a6a4c 56%, #6e5038 100%);
}

.tv {
  position: relative;
  width: 100%;
  max-width: 600px;
  padding: 46px 20px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  border-radius: 14px;
  border: 6px solid #0d0d0f;
  background:
    radial-gradient(circle at 75% 70%, rgba(40, 70, 40, .55), transparent 40%),
    radial-gradient(circle at 25% 35%, rgba(90, 70, 60, .5), transparent 45%),
    linear-gradient(180deg, #2a2523, #171413);
  box-shadow: 0 30px 60px rgba(40, 20, 5, .55);
}
.tv-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, .08), transparent 60%);
  pointer-events: none;
}

.console {
  width: min(560px, 92%);
  height: 18px;
  margin-top: 26px;
  border-radius: 4px;
  background: linear-gradient(180deg, #a77d55, #7d5a3b);
  box-shadow: 0 10px 20px rgba(40, 20, 5, .4);
}

/* Verre dépoli (glassmorphism) */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 8px 24px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}

/* ---------- 1. Onglets texte ---------- */
.seg {
  position: relative;
  height: 46px;
  transition: width .55s var(--ease);
}
.seg-bg {
  position: absolute;
  top: 0;
  height: 46px;
  border-radius: 16px;
  transition: left .55s var(--ease), width .55s var(--ease), opacity .3s ease;
}
.active-bg {
  background: linear-gradient(180deg, #4a74c9, #2f57ad);
  border: 1px solid rgba(160, 190, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 26px rgba(55, 100, 220, .45);
}
.seg-item {
  position: absolute;
  top: 0;
  left: 0;
  height: 46px;
  padding: 0 20px;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
  transition: transform .55s var(--ease), color .25s ease;
}
.seg-item:hover { color: var(--mint); }
.seg-item.is-active, .seg-item.is-active:hover { color: #fff; }

/* ---------- 2. Icônes + cart ---------- */
.row { display: flex; align-items: center; gap: 14px; }

.pill-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 60px;
  padding: 6px;
  border-radius: 30px;
}
.pill-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  height: 46px;
  border-radius: 23px;
  background: linear-gradient(180deg, #3f8f79, #2c6e5c);
  border: 1px solid rgba(140, 230, 200, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px rgba(30, 140, 110, .35);
  transition: transform .5s var(--ease), width .5s var(--ease);
}
.pill-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 23px;
  color: rgba(255, 255, 255, .85);
  transition: width .5s var(--ease), color .25s ease;
}
.pill-item svg { flex: none; }
.pill-item .fill { transition: fill .3s ease; }
.pill-item.is-active .fill { fill: currentColor; }
.pill-item span { font-size: 15px; font-weight: 500; opacity: 0; transform: translateX(-6px); transition: opacity .3s ease, transform .4s var(--ease); }
.pill-item.is-active { color: #fff; }
.pill-item.is-active span { opacity: 1; transform: none; transition-delay: .12s; }
.pill-item:not(.is-active):hover { color: var(--mint); }

.cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.cart svg { width: 22px; height: 22px; }
.cart.bump svg { animation: wiggle .45s ease; }
.badge {
  position: absolute;
  top: 7px;
  right: 7px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #ef4444;
  border: 2px solid rgba(255, 255, 255, .85);
  font: 700 10px/1 system-ui, sans-serif;
}
.badge.pop { animation: badge .45s cubic-bezier(.3, 1.8, .5, 1); }

/* ---------- 3. Dock à creux ---------- */
.dock {
  --x: 42px;
  position: relative;
  width: min(440px, 92vw);
  height: 64px;
  margin-top: -30px;
  z-index: 2;
}
.dock-bar {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 244, 232, .5), rgba(255, 230, 205, .3));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px rgba(40, 20, 5, .35);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  /* Creux arrondi sous la bulle active */
  -webkit-mask: radial-gradient(circle 34px at var(--x) -10px, transparent 32px, #000 34.5px);
          mask: radial-gradient(circle 34px at var(--x) -10px, transparent 32px, #000 34.5px);
}
.dock-bubble {
  position: absolute;
  top: -34px;
  left: calc(var(--x) - 24px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(180deg, #4f9c86, #2f725f);
  border: 1px solid rgba(160, 240, 210, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px rgba(30, 120, 95, .45);
  display: grid;
  place-items: center;
}
.dock-bubble svg { width: 21px; height: 21px; color: #fff; }
.dock-bubble.hop { animation: hop .6s var(--ease); }
.dock { transition: --x .6s var(--ease); }

.dock-items {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding-top: 4px;
}
.dock-item {
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .9);
  transition: opacity .25s ease, transform .3s var(--ease), color .2s;
}
.dock-item svg { width: 21px; height: 21px; }
.dock-item:hover { color: var(--mint); transform: translateY(-2px); }
.dock-item.is-active { opacity: 0; }

.dock-line {
  position: absolute;
  left: 50%;
  bottom: 7px;
  width: 92px;
  height: 4px;
  margin-left: -46px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .65);
}

/* ---------- Animations ---------- */
@keyframes wiggle { 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg) scale(1.08); } 75% { transform: rotate(-4deg); } }
@keyframes badge { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(.92); } 100% { transform: translateY(0) scale(1); } }

@media (max-width: 520px) {
  .tv { padding: 32px 10px 40px; gap: 26px; }
  .seg-item { padding: 0 14px; font-size: 14px; }
  .pill-item { padding: 0 13px; }
  .pill-bar { height: 56px; }
  .cart { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

// Navigation Tabs — trois barres animées en verre dépoli (vanilla JS)

// ---------- 1. Onglets texte : l'actif se détache, les autres se regroupent ----------
const seg = document.getElementById('seg');
const segItems = [...seg.querySelectorAll('.seg-item')];
const segBg = {
  a: seg.querySelector('[data-bg="a"]'),
  b: seg.querySelector('[data-bg="b"]'),
  active: seg.querySelector('[data-bg="active"]'),
};
const GAP = 12; // espace entre la pilule active et les groupes

function layoutSeg(active) {
  const widths = segItems.map((b) => b.offsetWidth);
  const pos = [];
  let x = 0;
  widths.forEach((w, i) => {
    if (i === active && i > 0) x += GAP;
    pos[i] = x;
    x += w;
    if (i === active && i < widths.length - 1) x += GAP;
  });
  seg.style.width = `${x}px`;

  segItems.forEach((b, i) => {
    b.style.transform = `translateX(${pos[i]}px)`;
    b.classList.toggle('is-active', i === active);
  });

  // Fond d'un groupe = du premier au dernier onglet du groupe (vide : réduit à zéro au bord).
  const place = (el, from, to) => {
    if (from > to) {
      const edge = from > active ? x : 0;
      Object.assign(el.style, { left: `${edge}px`, width: '0px', opacity: '0' });
    } else {
      Object.assign(el.style, { left: `${pos[from]}px`, width: `${pos[to] + widths[to] - pos[from]}px`, opacity: '1' });
    }
  };
  place(segBg.a, 0, active - 1);
  place(segBg.b, active + 1, segItems.length - 1);
  place(segBg.active, active, active);
}

segItems.forEach((b, i) => b.addEventListener('click', () => layoutSeg(i)));

// ---------- 2. Icônes : l'active s'ouvre en pilule verte avec son nom ----------
const pillBar = document.getElementById('pillBar');
const pillItems = [...pillBar.querySelectorAll('.pill-item')];
const indicator = document.getElementById('pillIndicator');
let collapsed = 0;
let expanded = [];

function measurePills() {
  // Largeurs fermée (icône seule) et ouverte (icône + nom), mesurées une fois.
  const first = pillItems[0];
  const pad = parseFloat(getComputedStyle(first).paddingLeft) * 2;
  collapsed = Math.ceil(first.querySelector('svg').getBoundingClientRect().width + pad);
  expanded = pillItems.map((b) => {
    b.style.width = 'auto';
    return Math.ceil(b.getBoundingClientRect().width) + 2;
  });
}

function layoutPills(active) {
  const gap = 4;
  let x = 0;
  pillItems.forEach((b, i) => {
    const w = i === active ? expanded[i] : collapsed;
    b.style.width = `${w}px`;
    b.classList.toggle('is-active', i === active);
    if (i === active) {
      indicator.style.width = `${w}px`;
      indicator.style.transform = `translateX(${x}px)`;
    }
    x += w + gap;
  });
}

pillItems.forEach((b, i) => b.addEventListener('click', () => layoutPills(i)));

// Panier : le compteur augmente avec un petit rebond.
const cart = document.getElementById('cart');
const badge = document.getElementById('badge');
cart.addEventListener('click', () => {
  badge.textContent = String(Number(badge.textContent) + 1);
  [badge, cart].forEach((el) => el.classList.remove('pop', 'bump'));
  void cart.offsetWidth;
  badge.classList.add('pop');
  cart.classList.add('bump');
});

// ---------- 3. Dock : le creux et la bulle glissent vers l'élément choisi ----------
const dock = document.getElementById('dock');
const dockItems = [...dock.querySelectorAll('.dock-item')];
const bubble = document.getElementById('dockBubble');

function layoutDock(active, animate = true) {
  const cell = dock.offsetWidth / dockItems.length;
  dock.style.setProperty('--x', `${cell * (active + 0.5)}px`);
  dockItems.forEach((b, i) => b.classList.toggle('is-active', i === active));
  bubble.innerHTML = dockItems[active].innerHTML;
  if (animate) {
    bubble.classList.remove('hop');
    void bubble.offsetWidth;
    bubble.classList.add('hop');
  }
}

dockItems.forEach((b, i) => b.addEventListener('click', () => layoutDock(i)));

// ---------- Démarrage (après chargement des polices pour des mesures exactes) ----------
const current = () => ({
  seg: Math.max(0, segItems.findIndex((b) => b.classList.contains('is-active'))),
  pill: Math.max(0, pillItems.findIndex((b) => b.classList.contains('is-active'))),
  dock: Math.max(0, dockItems.findIndex((b) => b.classList.contains('is-active'))),
});

function init() {
  const c = current();
  document.body.classList.add('no-anim');
  measurePills();
  layoutSeg(c.seg);
  layoutPills(c.pill);
  layoutDock(c.dock, false);
  requestAnimationFrame(() => requestAnimationFrame(() => document.body.classList.remove('no-anim')));
}

(document.fonts ? document.fonts.ready : Promise.resolve()).then(init);
window.addEventListener('resize', () => {
  const c = current();
  layoutSeg(c.seg);
  layoutDock(c.dock, false);
});