/* Variables */
:root{
  --cgap-bg: rgba(255,255,255,0.35);
  --cgap-stroke: rgba(255,255,255,0.65);
  --cgap-shadow: rgba(15,23,42,0.18);
  --cgap-accent: #0a84ff;
  --cgap-accent-2: #4f46e5;
  --cgap-text: #0f172a;
  --cgap-muted:#64748b;
  --cgap-glow: rgba(10,132,255,0.35);
  --cgap-blue: #0000DE;
}

@media (prefers-color-scheme: dark){
  :root{
    --cgap-bg: rgba(15,23,42,0.35);
    --cgap-stroke: rgba(255,255,255,0.15);
    --cgap-shadow: rgba(0,0,0,0.35);
    --cgap-text: #e5e7eb;
    --cgap-muted:#94a3b8;
    --cgap-glow: rgba(99,102,241,0.35);
  }
}

.cgap-audio{
  display:grid; place-items:center;
  margin:24px 0 28px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--cgap-text);
}

/* === Bouton principal === */
.cgap-btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  padding:16px 26px; border-radius:16px; border:1px solid transparent;
  cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, background .4s ease, border-color .4s ease;
  outline:none; box-shadow:0 10px 30px var(--cgap-shadow);
}
.cgap-btn:active{ transform: translateY(0); }

/* État de boot: BLEU plein puis transition vers GLASS */
.cgap-btn.cgap-boot{
  background: var(--cgap-blue);
  color:#fff;
  border-color: rgba(255,255,255,0.15);
}
.cgap-btn.cgap-boot .cgap-icon{ fill:#fff; }
.cgap-btn.cgap-boot .cgap-total-min{ color: rgba(255,255,255,.9); }

/* Une fois la tempo passée, on passe en verre dépoli */
.cgap-btn.cgap-boot-done,
.cgap-btn.cgap-btn-primary{
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  color:var(--cgap-text);
  border-color: rgba(255,255,255,.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.cgap-btn:hover{ transform:translateY(-1px); box-shadow:0 16px 38px var(--cgap-shadow); }

/* Effet “liquid glass” doux */
.cgap-btn-blob{
  position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; filter:blur(18px); opacity:.9;
  background:
    radial-gradient(120px 120px at 10% 10%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(160px 160px at 90% 20%, var(--cgap-glow), transparent 60%),
    radial-gradient(160px 160px at 10% 90%, rgba(255,255,255,.45), transparent 60%);
}
.cgap-btn-inner{ position:relative; display:inline-flex; align-items:center; gap:14px; z-index:1; }
.cgap-icon{ fill:var(--cgap-text); opacity:.95; }
.cgap-btn-text{ display:flex; flex-direction:column; align-items:flex-start; }
.cgap-label{ font-weight:700; letter-spacing:.2px; }
.cgap-total-min{ font-size:12px; color:var(--cgap-muted); margin-top:2px; }

/* Animation quand ça joue */
.cgap-btn.is-playing{
  animation: cgap-pulse 1.4s ease-in-out infinite;
}
@keyframes cgap-pulse{
  0%{ box-shadow:0 10px 30px var(--cgap-shadow); transform: translateY(-1px); }
  50%{ box-shadow:0 14px 36px var(--cgap-shadow), 0 0 24px var(--cgap-glow); }
  100%{ box-shadow:0 10px 30px var(--cgap-shadow); transform: translateY(-1px); }
}

/* Toggle icônes play/pause (bouton principal + barre) */
.cgap-icon-pause{ display:none; }

/* === Barre player compacte & arrondie === */
/* Conteneur fixe mais non “full-bleed”, centré + padding bas */
.cgap-bar{
  position:fixed; left:0; right:0;
  bottom:24px; /* padding bas demandé */
  display:flex; justify-content:center; align-items:center;
  z-index:9999; pointer-events:none; /* seul le contenu interne reçoit les events */
}

/* Carte interne : largeur max + arrondis + glass */
.cgap-bar-inner{
  pointer-events:auto;
  width:min(760px, calc(100% - 32px)); /* pas 100% */
  border-radius:20px; /* arrondi demandé */
  padding:12px 16px;
  transition: transform .26s ease-out, opacity .26s ease-out;
  transform: translateY(0%); opacity:1;
  border:1px solid var(--cgap-stroke);
  background: var(--cgap-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 8px 30px var(--cgap-shadow);
}
.cgap-rounded{ border-radius:20px; }
.cgap-hidden{ transform: translateY(120%); opacity:0; }

.cgap-bar-inner{ 
  display:grid; grid-template-columns:auto 56px 1fr 56px auto; align-items:center; gap:14px;
}

/* Contrôles & timeline */
.cgap-ctrl{
  background:transparent; border:0; color:var(--cgap-text); font-weight:700;
  cursor:pointer; padding:8px 10px; border-radius:12px; transition:background .2s ease, transform .1s ease;
}
.cgap-ctrl:hover{ background: rgba(255,255,255,.2); }
.cgap-ctrl:active{ transform: scale(.98); }

.cgap-time{ font-variant-numeric: tabular-nums; font-size:14px; color:var(--cgap-muted); }

.cgap-timeline{
  position:relative; height:10px; border-radius:999px; overflow:hidden; cursor:pointer; outline:none;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
}
.cgap-timeline:focus{ box-shadow: 0 0 0 3px rgba(10,132,255,.25); }
.cgap-progress{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  border-radius:inherit;
  background: linear-gradient(90deg, var(--cgap-accent), var(--cgap-accent-2));
  box-shadow:0 0 24px var(--cgap-glow);
}

/* Responsive */
@media (max-width:640px){
  .cgap-bar-inner{ grid-template-columns:auto auto 1fr auto auto; gap:10px; }
}

/* Réduction animations si demandé */
@media (prefers-reduced-motion: reduce){
  .cgap-btn, .cgap-bar-inner{ transition:none !important; }
  .cgap-btn-blob{ display:none; }
}