@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@400;600;700&display=swap");  .nour-player .audiojs {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
} .nour-player audio.nour-audio-player,
.nour-player .js-player {
display: block !important;
visibility: visible !important;
width: 100%;
min-height: 44px;
margin: 8px 0;
accent-color: var(--sp-color-primary);
color-scheme: light;
border-radius: 10px;
} .nour-player audio.nour-audio-player::-webkit-media-controls-panel {
background-color: rgba(var(--sp-color-primary-rgb), 0.06);
}
.nour-player audio.nour-audio-player::-webkit-media-controls-play-button,
.nour-player audio.nour-audio-player::-webkit-media-controls-timeline {
accent-color: var(--sp-color-primary);
}
.nour-player {
--sp-color-primary: #0B4F8A;
--sp-color-primary-rgb: 11, 79, 138;
--sp-color-primary-dark: rgb(8, 59, 104);
--sp-color-primary-dark-rgb: 8, 59, 104;
--sp-color-secondary: #E09A1B;
--sp-color-secondary-rgb: 224, 154, 27;
--sp-color-bg: #ffffff;
--sp-color-light: rgba(var(--sp-color-primary-rgb), 0.08);
--sp-color-soft: rgba(var(--sp-color-primary-rgb), 0.04);
--sp-color-border: rgba(var(--sp-color-primary-rgb), 0.16);
--sp-color-muted: #5f6b7a;
--sp-color-text: #1f2937;
font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: var(--sp-color-text);
width: 100%;
margin: 0 auto;
line-height: 1.6;
}
.nour-player * {
box-sizing: border-box;
}
.nour-player .player-card {
background: var(--sp-color-bg);
border-radius: 22px;
border: 1px solid var(--sp-color-border);
box-shadow: 0 20px 40px rgba(var(--sp-color-primary-dark-rgb), 0.12);
padding: 28px 34px 32px;
max-width: 720px;
margin: 0 auto;
}
@media (max-width: 720px) {
.nour-player .player-card {
padding: 26px 22px;
border-radius: 20px;
}
}
@media (max-width: 520px) {
.nour-player .player-card {
padding: 22px 18px;
border-radius: 18px;
}
}
.nour-player .player-top {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
}
.nour-player .now-playing-label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 14px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
background: rgba(var(--sp-color-secondary-rgb), 0.16);
color: var(--sp-color-primary-dark);
}
.nour-player .now-playing-label::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--sp-color-secondary);
}
.nour-player .titre-audio {
margin: 6px 0 2px;
font-size: 1.85rem;
font-weight: 700;
color: var(--sp-color-text);
line-height: 1.25;
}
@media (max-width: 520px) {
.nour-player .titre-audio {
font-size: 1.65rem;
}
}
.nour-player .auteur-audio {
margin: 0;
color: var(--sp-color-text);
font-size: 1.05rem;
font-weight: 400;
}
.nour-player .intervenant-audio {
margin: 0;
color: var(--sp-color-muted);
font-size: 0.95rem;
font-weight: 400;
}
.nour-player .player-stats {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 999px;
background: var(--sp-color-light);
color: var(--sp-color-primary);
font-weight: 600;
}
.nour-player .player-stats[hidden] {
display: none;
}
.nour-player .player-stats-label {
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(var(--sp-color-primary-rgb), 0.7);
}
.nour-player .player-stats-value {
font-size: 1.1rem;
}
.nour-player .player-shell {
margin-top: 26px;
display: flex;
flex-direction: column;
gap: 18px;
}
.nour-player .player-instance {
padding: 18px 0 12px;
}
.nour-player .transport-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}
.nour-player .transport-group {
display: inline-flex;
align-items: center;
gap: 14px;
}
.nour-player .transport-btn {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
border-radius: 50%;
border: 1px solid rgba(var(--sp-color-primary-rgb), 0.2);
background: var(--sp-color-light);
color: var(--sp-color-primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
padding: 0;
}
.nour-player .transport-btn svg {
width: 24px;
height: 24px;
display: block;
}
.nour-player .transport-btn:hover {
background: var(--sp-color-primary);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 12px 20px rgba(var(--sp-color-primary-dark-rgb), 0.22);
} .nour-player .ghost-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid var(--sp-color-primary);
background: rgba(var(--sp-color-primary-rgb), 0.08);
color: var(--sp-color-primary);
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.nour-player .ghost-button:hover {
background: var(--sp-color-primary);
color: #ffffff;
box-shadow: 0 14px 24px rgba(var(--sp-color-primary-dark-rgb), 0.22);
}
.nour-player .ghost-button svg {
width: 20px;
height: 20px;
} .nour-player .ghost-button.transport-btn {
width: auto;
padding: 0 18px;
border-radius: 999px;
} @media (max-width: 520px) {
.nour-player .ghost-button.transport-btn {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
padding: 0;
border-radius: 50%;
}
.nour-player .ghost-button .download-all-text {
display: none;
}
.nour-player .ghost-button svg {
width: 24px;
height: 24px;
}
}
.nour-player .playlist-section {
margin-top: 32px;
display: flex;
flex-direction: column;
gap: 16px;
}
.nour-player .playlist-header {
display: flex;
justify-content: center;
}
.nour-player .playlist-count {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 6px 18px;
border-radius: 999px;
background: rgba(var(--sp-color-primary-rgb), 0.08);
color: var(--sp-color-primary);
font-weight: 600;
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nour-player .playlist-container {
padding: 0;
}
.nour-player .playlist-liste {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.nour-player .playlist-loading {
padding: 36px 10px;
text-align: center;
color: var(--sp-color-muted);
font-style: italic;
}
.nour-player .playlist-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 20px 24px;
border-radius: 14px;
border: 1px solid var(--sp-color-border);
background: var(--sp-color-bg);
box-shadow: 0 6px 16px rgba(var(--sp-color-primary-dark-rgb), 0.06);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.nour-player .playlist-item:hover {
transform: translateY(-2px);
border-color: rgba(var(--sp-color-primary-rgb), 0.35);
box-shadow: 0 10px 22px rgba(var(--sp-color-primary-dark-rgb), 0.1);
} .nour-player .playlist-item.active {
border-color: var(--sp-color-primary);
background: rgba(var(--sp-color-primary-rgb), 0.05);
box-shadow: inset 4px 0 0 var(--sp-color-secondary), 0 10px 24px rgba(var(--sp-color-primary-dark-rgb), 0.12);
}
.nour-player .playlist-item-index span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--sp-color-light);
color: var(--sp-color-primary);
font-weight: 700;
font-size: 1.05rem;
}
.nour-player .playlist-item.active .playlist-item-index span {
background: var(--sp-color-primary);
color: #ffffff;
}
.nour-player .playlist-item-info {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.nour-player .playlist-item-title-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.nour-player .part-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: var(--sp-color-primary);
color: #ffffff;
}
.nour-player .playlist-item.active .part-badge {
background: var(--sp-color-bg);
color: var(--sp-color-primary);
}
.nour-player .playlist-item-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--sp-color-text);
}
.nour-player .playlist-item.active .playlist-item-title {
color: var(--sp-color-primary-dark);
}
.nour-player .playlist-item-meta {
font-weight: 400;
text-align: center;
}
.nour-player .playlist-item-meta.author {
font-size: 0.95rem;
color: var(--sp-color-text);
}
.nour-player .playlist-item-meta.speaker {
font-size: 0.85rem;
color: var(--sp-color-muted);
}
.nour-player .playlist-item-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.nour-player .listen-count {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: var(--sp-color-light);
color: var(--sp-color-primary);
font-weight: 600;
font-size: 0.95rem;
}
.nour-player .listen-count-icon {
width: 18px;
height: 18px;
fill: currentColor;
}
.nour-player .listen-count-value {
font-size: 1.05rem;
}
.nour-player .listen-count-label {
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(var(--sp-color-primary-rgb), 0.7);
}
.nour-player .playlist-item.active .listen-count {
background: var(--sp-color-bg);
}
.nour-player .playlist-item-download {
width: 42px;
height: 42px; padding: 0;
flex: 0 0 auto;
border-radius: 50%;
border: 1px solid var(--sp-color-border);
background: var(--sp-color-light);
color: var(--sp-color-primary);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.nour-player .playlist-item-download svg {
width: 20px;
height: 20px;
fill: currentColor;
} .nour-player button svg,
.nour-player .listen-count svg {
flex: 0 0 auto;
min-width: 12px;
}
.nour-player .playlist-item-download:hover {
background: var(--sp-color-primary);
color: #ffffff;
box-shadow: 0 12px 22px rgba(var(--sp-color-primary-dark-rgb), 0.22);
}
.nour-player .playlist-item.active .playlist-item-download {
background: var(--sp-color-primary);
color: #ffffff;
}
@media (max-width: 640px) {
.nour-player .player-card {
padding: 22px 16px;
border-radius: 16px;
}
}
@media (max-width: 580px) {
.nour-player .playlist-item {
padding: 20px 18px;
}
.nour-player .playlist-item-index span {
width: 48px;
height: 48px;
}
}
.nour-player .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.nour-player button {
font-family: inherit;
}
.nour-player svg.icon {
flex-shrink: 0;
fill: currentColor;
}
@media (max-width: 480px) {
.nour-player .player-card {
padding: 20px 12px;
border-radius: 14px;
margin: 0 -8px;
max-width: none;
}
.nour-player .player-instance {
padding: 16px 12px 10px;
}
} .nour-player .nour-player-download-fallback {
margin: 12px 16px;
padding: 10px 14px;
border-radius: 8px;
background: rgba(var(--sp-color-secondary-rgb), 0.12);
font-size: 0.9em;
line-height: 1.4;
}
.nour-player .nour-player-download-fallback p {
margin: 0 0 6px;
}
.nour-player .nour-player-download-fallback ul {
margin: 0;
padding-left: 18px;
}
.nour-player .nour-player-download-fallback a {
word-break: break-word;
} .nour-player .resume-button {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 auto 10px;
padding: 9px 16px;
border: 0;
border-radius: 999px;
background: var(--sp-color-primary);
color: #ffffff;
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 18px rgba(var(--sp-color-primary-dark-rgb), 0.25);
}
.nour-player .resume-button[hidden] {
display: none;
}
.nour-player .resume-button:hover {
background: var(--sp-color-primary-dark);
} .nour-player .nour-transport[hidden] {
display: none;
}
.nour-player .nour-transport {
display: block;
margin: 10px 0 4px;
}
.nour-player .nour-seek {
display: flex;
align-items: center;
height: 44px;
cursor: pointer;
touch-action: none;
}
.nour-player .nour-seek:focus-visible {
outline: 2px solid var(--sp-color-primary);
outline-offset: 2px;
border-radius: 6px;
}
.nour-player .nour-seek-rail {
position: relative;
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(var(--sp-color-primary-rgb), 0.14);
}
.nour-player .nour-seek-buffer,
.nour-player .nour-seek-played {
position: absolute;
top: 0;
left: 0;
height: 100%;
border-radius: 999px;
}
.nour-player .nour-seek-buffer {
width: 0;
background: rgba(var(--sp-color-primary-rgb), 0.22);
}
.nour-player .nour-seek-played {
width: 0;
background: var(--sp-color-primary);
}
.nour-player .nour-seek-handle {
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-left: -7px;
border-radius: 50%;
background: var(--sp-color-primary);
transform: translateY(-50%);
box-shadow: 0 2px 6px rgba(var(--sp-color-primary-dark-rgb), 0.35);
}
.nour-player .nour-times {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: var(--sp-color-muted);
font-variant-numeric: tabular-nums;
}
.nour-player .nour-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-top: 8px;
}
.nour-player .nour-buttons .transport-btn {
position: relative;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
}
.nour-player .nour-buttons .nour-play {
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
background: var(--sp-color-primary);
color: #ffffff;
border-color: var(--sp-color-primary);
}
.nour-player .nour-buttons .nour-play:hover {
background: var(--sp-color-primary-dark);
} .nour-player .nour-skip-label {
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
} .nour-player .nour-buttons .nour-speed {
width: auto;
min-width: 52px;
height: 44px;
padding: 0 12px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
text-transform: none;
letter-spacing: normal;
white-space: nowrap;
overflow: visible;
} .nour-player .nour-share-note[hidden] {
display: none;
}
.nour-player .nour-share-note {
display: block;
margin-top: 6px;
font-size: 0.78rem;
color: var(--sp-color-muted);
text-align: center;
word-break: break-all;
}