/* Lecteur Live Coran 24/24 (commun à Al-quran-H24 et Babou Salam) */
.clp { --or: #e3b04b; --vert: #14a374; --nuit: #03130d; position: relative; border-radius: 18px; overflow: hidden; background: var(--nuit); color: #fff; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(227, 176, 75, .28), 0 30px 80px -30px rgba(0, 0, 0, .8); font-family: inherit; outline: none; }
.clp-ecran { position: relative; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 50% 60%, #0b3a29, var(--nuit) 70%); }
.clp-ecran video, .clp-ecran iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; object-fit: contain; transition: opacity .6s; }
.clp:not(.joue) video { opacity: 0; }
.clp.plein { border-radius: 0; display: flex; flex-direction: column; justify-content: center; }
.clp.plein .clp-ecran { aspect-ratio: auto; flex: 1; }

/* Voile d'accueil : bouton unique, très visible */
.clp-voile { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 20px; z-index: 2; transition: opacity .5s, visibility .5s; }
.clp.joue .clp-voile { opacity: 0; visibility: hidden; }
.clp.joue.attente .clp-voile { opacity: 1; visibility: visible; background: rgba(3, 19, 13, .45); }
.clp.joue.attente .clp-go { display: none; }
.clp-go { display: inline-flex; align-items: center; gap: 14px; padding: 14px 28px 14px 14px; border: 0; border-radius: 99px; cursor: pointer; font: inherit; font-size: clamp(1rem, 2.4vw, 1.25rem); font-weight: 700; color: #1d1405;
  background: linear-gradient(135deg, #f6d27e, var(--or)); box-shadow: 0 12px 34px -8px rgba(227, 176, 75, .6), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.clp-go:hover { transform: scale(1.04); box-shadow: 0 16px 40px -8px rgba(227, 176, 75, .75); }
.clp-go:focus-visible, .clp-b:focus-visible, .clp-sonner:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.clp-go-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #1d1405; color: var(--or); }
.clp-go-ico svg { width: 24px; height: 24px; margin-left: 3px; }
.clp-etat { margin: 0; min-height: 1.4em; color: rgba(255, 255, 255, .85); font-size: .95rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.clp-secours { font: inherit; font-size: .85rem; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); border-radius: 99px; padding: 6px 14px; cursor: pointer; }

/* « Activer le son » : un seul geste quand la lecture a démarré en muet */
.clp-sonner { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 99px; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 1rem; white-space: nowrap; color: #1d1405; background: linear-gradient(135deg, #f6d27e, var(--or)); box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .6); }
.clp-sonner svg { width: 22px; height: 22px; }
.clp-sonner[hidden] { display: none; }

/* Attente (mise en mémoire tampon) */
.clp-attente { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .15); border-top-color: var(--or); opacity: 0; z-index: 1; pointer-events: none; }
.clp.lance:not(.joue) .clp-attente, .clp.attente .clp-attente { opacity: 1; animation: clp-tour 1s linear infinite; }
.clp.lance:not(.joue) .clp-go { display: none; }

/* Mode écoute : écran calme, ondes lentes, idéal pour la nuit ou une petite batterie */
.clp-onde { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .6s; pointer-events: none; }
.clp-onde i { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(227, 176, 75, .5); }
.clp-onde b { width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #f6d27e, var(--or)); box-shadow: 0 0 40px 10px rgba(227, 176, 75, .35); }
.clp-onde em, .clp-onde small { position: absolute; left: 6%; right: 6%; text-align: center; font-style: normal; }
.clp-onde em { bottom: 16%; font-size: clamp(1rem, 2.6vw, 1.6rem); font-weight: 700; letter-spacing: -.01em; }
.clp-onde small { bottom: calc(16% - 1.8em); color: rgba(255, 255, 255, .7); font-size: clamp(.78rem, 1.6vw, .95rem); }
.clp.audio video { opacity: 0 !important; }
.clp.audio.joue .clp-onde { opacity: 1; }
.clp.audio.joue .clp-onde i { animation: clp-onde 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.clp.audio.joue .clp-onde i:nth-child(2) { animation-delay: 2s; }
.clp.audio.joue .clp-onde i:nth-child(3) { animation-delay: 4s; }

/* Barre de commandes */
.clp-barre { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02)); border-top: 1px solid rgba(255, 255, 255, .07); }
.clp-b { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.clp-b:hover { background: rgba(255, 255, 255, .1); }
.clp-b:active { transform: scale(.92); }
.clp-b svg { width: 22px; height: 22px; }
.clp-vol { --p: 100%; width: 92px; height: 4px; appearance: none; -webkit-appearance: none; border-radius: 4px; cursor: pointer; background: linear-gradient(90deg, var(--or) var(--p), rgba(255, 255, 255, .2) var(--p)); }
.clp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .4); }
.clp-vol::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #fff; }
.clp-pastille { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; padding: 4px 10px; border-radius: 99px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; background: rgba(229, 72, 77, .16); color: #ff8a8e; }
.clp-pastille i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.clp.joue .clp-pastille i { animation: clp-pouls 1.8s ease-out infinite; }
.cl-hors-antenne .clp-pastille { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .6); }
.cl-hors-antenne .clp-pastille i { background: #999; animation: none; }
.clp-esp { flex: 1; }
.clp-note { margin: 0; padding: 10px 14px; font-size: .85rem; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .04); }
@media (max-width: 520px) { .clp-vol { display: none; } .clp-sonner { bottom: 12px; padding: 9px 16px; font-size: .92rem; } .clp-go { padding: 10px 20px 10px 10px; } .clp-go-ico { width: 38px; height: 38px; } .clp-barre { padding: 6px 8px; } .clp { border-radius: 14px; } }

/* Texte qui change : léger fondu */
.cl-neuf { animation: clp-neuf .7s cubic-bezier(.2, .8, .2, 1); }
@keyframes clp-neuf { from { opacity: 0; transform: translateY(6px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes clp-tour { to { transform: rotate(360deg); } }
@keyframes clp-pouls { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .7); } 70% { box-shadow: 0 0 0 8px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
@keyframes clp-onde { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .clp *, .cl-neuf { animation: none !important; transition: none !important; } }