/* ------------------------------------------------------------------
   Player audio DeejaysWorld
   Remplace le player JW/Flash. La waveform reutilise les PNG deja
   generes par cron/waveform.php (data/waveform/), appliques en masque
   CSS : aucun decodage audio cote client, ce qui compte pour des mix
   d'une heure. Palette alignee sur style.css (#182127 / #545d63) et
   sur l'orange des waveforms (#ff5500).
   ------------------------------------------------------------------ */

.dw-player{
	--dw-orange:#ff5500;
	--dw-orange-clair:#ff8a3d;
	--dw-ardoise:#182127;
	--dw-texte:#dfe5ea;
	--dw-texte-doux:#8d99a2;
	position:relative;
	box-sizing:border-box;
	width:100%;
	padding:14px 16px 12px;
	border-radius:9px;
	background:linear-gradient(180deg,#2c363d 0%,var(--dw-ardoise) 100%);
	box-shadow:0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
	font-family:'Roboto',Arial,sans-serif;
	color:var(--dw-texte);
	-webkit-user-select:none;-moz-user-select:none;user-select:none;
}
.dw-player *,.dw-player *:before,.dw-player *:after{box-sizing:border-box;}

/* --- Ligne principale : bouton + waveform --- */
.dw-rangee{display:flex;align-items:center;gap:14px;}

.dw-lecture{
	flex:0 0 auto;
	position:relative;
	width:48px;height:48px;padding:0;
	border:0;border-radius:50%;
	background:linear-gradient(180deg,var(--dw-orange-clair),var(--dw-orange));
	box-shadow:0 2px 6px rgba(0,0,0,.4);
	color:#fff;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	transition:transform .12s ease, box-shadow .12s ease;
}
.dw-lecture:hover{transform:scale(1.06);}
.dw-lecture:active{transform:scale(.97);}
.dw-lecture:focus-visible{outline:2px solid var(--dw-orange-clair);outline-offset:3px;}
.dw-lecture svg{width:20px;height:20px;fill:#fff;display:block;}
.dw-lecture .dw-icone-pause{display:none;}
.dw-player.est-en-lecture .dw-lecture .dw-icone-play{display:none;}
.dw-player.est-en-lecture .dw-lecture .dw-icone-pause{display:block;}

/* Halo qui bat pendant la lecture */
.dw-player.est-en-lecture .dw-lecture:after{
	content:"";position:absolute;inset:-4px;border-radius:50%;
	border:2px solid var(--dw-orange);
	animation:dw-halo 1.8s ease-out infinite;
}
@keyframes dw-halo{
	0%{transform:scale(1);opacity:.55;}
	100%{transform:scale(1.35);opacity:0;}
}

/* --- Waveform --- */
.dw-piste{
	position:relative;flex:1 1 auto;height:72px;
	cursor:pointer;touch-action:none;
	border-radius:3px;
}
.dw-piste:focus-visible{outline:2px solid var(--dw-orange-clair);outline-offset:3px;}

.dw-onde{position:absolute;inset:0;overflow:hidden;}
.dw-onde>span{position:absolute;top:0;bottom:0;left:0;display:block;}
.dw-fond{width:100%;background:#7a8892;}
.dw-tampon{width:0;background:#9aa7b0;}
.dw-jouee{width:0;background:linear-gradient(180deg,var(--dw-orange-clair),var(--dw-orange));}

/* Le PNG de waveform sert de masque : les trois calques prennent sa forme. */
.dw-onde.a-masque>span{
	-webkit-mask-image:var(--dw-onde-src);mask-image:var(--dw-onde-src);
	-webkit-mask-size:100% 100%;mask-size:100% 100%;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:left center;mask-position:left center;
}
/* Sans masque (navigateur trop ancien) : on affiche le PNG tel quel. */
.dw-onde:not(.a-masque){
	background:var(--dw-onde-src) left center/100% 100% no-repeat;
}
.dw-onde:not(.a-masque)>span{display:none;}

/* Reflet qui glisse sur la partie jouee */
.dw-player.est-en-lecture .dw-jouee:after{
	content:"";position:absolute;inset:0;
	background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.38) 50%,transparent 100%);
	animation:dw-reflet 2.4s linear infinite;
}
@keyframes dw-reflet{
	0%{transform:translateX(-100%);}
	100%{transform:translateX(100%);}
}

/* Tete de lecture */
.dw-tete{
	position:absolute;top:0;bottom:0;left:0;width:2px;
	background:#fff;box-shadow:0 0 6px rgba(255,120,40,.9);
	opacity:0;transition:opacity .2s ease;pointer-events:none;
}
.dw-player.est-chargee .dw-tete{opacity:.9;}

/* Infobulle de temps au survol */
.dw-survol{
	position:absolute;bottom:calc(100% + 6px);
	transform:translateX(-50%);
	padding:2px 6px;border-radius:3px;
	background:rgba(0,0,0,.82);color:#fff;
	font-size:11px;line-height:16px;white-space:nowrap;
	opacity:0;transition:opacity .12s ease;pointer-events:none;
}
.dw-piste:hover .dw-survol{opacity:1;}

/* Egaliseur de secours quand aucune waveform n'existe encore */
.dw-egaliseur{position:absolute;inset:0;display:none;align-items:center;gap:2px;padding:0 1px;}
.dw-player.sans-onde .dw-egaliseur{display:flex;}
.dw-player.sans-onde .dw-onde{display:none;}
.dw-egaliseur i{
	flex:1 1 auto;display:block;height:12%;border-radius:1px;
	background:#7a8892;transform-origin:center;
}
.dw-player.sans-onde.est-en-lecture .dw-egaliseur i{
	background:linear-gradient(180deg,var(--dw-orange-clair),var(--dw-orange));
	animation:dw-battement 1s ease-in-out infinite;
}
@keyframes dw-battement{
	0%,100%{height:12%;}
	50%{height:88%;}
}

/* --- Ligne du bas : temps, volume --- */
.dw-bas{
	display:flex;align-items:center;gap:12px;
	margin-top:10px;padding-left:62px;
	font-size:12px;color:var(--dw-texte-doux);
}
.dw-horloge{font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.dw-horloge .dw-ecoule{color:var(--dw-texte);font-weight:500;}
/* Volontairement un <span> et non un <b> : style.css impose
   #article .bloc_article b{color:#CC0000}, dont la specificite (un ID)
   ne peut pas etre battue par des classes seules. */
.dw-etat{flex:1 1 auto;font-style:italic;}

.dw-volume{display:flex;align-items:center;gap:6px;}
.dw-muet{
	padding:0;border:0;background:none;color:var(--dw-texte-doux);
	cursor:pointer;display:flex;align-items:center;
}
.dw-muet:hover{color:var(--dw-texte);}
.dw-muet:focus-visible{outline:2px solid var(--dw-orange-clair);outline-offset:2px;border-radius:2px;}
.dw-muet svg{width:16px;height:16px;fill:currentColor;display:block;}
.dw-muet .dw-icone-coupe{display:none;}
.dw-player.est-muet .dw-muet .dw-icone-son{display:none;}
.dw-player.est-muet .dw-muet .dw-icone-coupe{display:block;}

.dw-volume input[type=range]{
	-webkit-appearance:none;appearance:none;
	width:78px;height:4px;border-radius:2px;
	background:#4a565e;outline:none;cursor:pointer;
}
.dw-volume input[type=range]::-webkit-slider-thumb{
	-webkit-appearance:none;appearance:none;
	width:12px;height:12px;border-radius:50%;
	background:var(--dw-texte);border:0;cursor:pointer;
}
.dw-volume input[type=range]::-moz-range-thumb{
	width:12px;height:12px;border-radius:50%;
	background:var(--dw-texte);border:0;cursor:pointer;
}
.dw-volume input[type=range]:focus-visible{outline:2px solid var(--dw-orange-clair);outline-offset:3px;}

/* --- Etats --- */
.dw-player.est-en-erreur .dw-piste{cursor:not-allowed;opacity:.55;}
.dw-player.est-en-erreur .dw-etat{color:#ff9a80;font-style:normal;}

@media (prefers-reduced-motion: reduce){
	.dw-player.est-en-lecture .dw-lecture:after,
	.dw-player.est-en-lecture .dw-jouee:after,
	.dw-player.sans-onde.est-en-lecture .dw-egaliseur i{animation:none;}
	.dw-lecture{transition:none;}
}

/* Ecrans etroits : le site est en largeur fixe, mais le player, lui, s'adapte. */
@media (max-width:520px){
	.dw-piste{height:56px;}
	.dw-bas{padding-left:0;flex-wrap:wrap;}
}