/* ASMR Relax - Styles */
:root {
    --primary-bg: #1a1a2e;
    --secondary-bg: #16213e;
    --accent: #0f3460;
    --text-light: #e94560;
    --text-dark: #ffffff;
    --text-muted: #a0a0a0;
    --pad-bg: #0f3460;
    --pad-active: #e94560;
    --pad-hover: #533483;
    --border-radius: 12px;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, var(--primary-bg), var(--secondary-bg));
    color: var(--text-dark);
    min-height: 100vh;
    overflow-x: hidden;
}

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 110px;
}

/* Header */
.app-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
}

.app-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: var(--text-light);
}

.leaf-title .letter {
    display: inline-block;
    animation: leaf-wind 5s ease-in-out infinite, autumn-colors 10s linear infinite;
    transform-origin: center bottom;
}

.leaf-title .letter:nth-child(2) { animation-delay: 0.2s, 0s; }
.leaf-title .letter:nth-child(3) { animation-delay: 0.5s, 1s; }
.leaf-title .letter:nth-child(4) { animation-delay: 0.8s, 2s; }
.leaf-title .letter:nth-child(5) { animation-delay: 1.1s, 3s; }
/* Child 6 is space */
.leaf-title .letter:nth-child(7) { animation-delay: 1.4s, 4s; }
.leaf-title .letter:nth-child(8) { animation-delay: 1.7s, 5s; }
.leaf-title .letter:nth-child(9) { animation-delay: 2.0s, 6s; }
.leaf-title .letter:nth-child(10) { animation-delay: 2.3s, 7s; }
.leaf-title .letter:nth-child(11) { animation-delay: 2.6s, 8s; }

@keyframes leaf-wind {
    0%, 100% {
        transform: translateY(0) rotate(0deg) translateX(0) skew(0deg);
    }
    20% {
        transform: translateY(-8px) rotate(10deg) translateX(4px) skew(5deg);
    }
    40% {
        transform: translateY(2px) rotate(-8deg) translateX(-2px) skew(-3deg);
    }
    60% {
        transform: translateY(-5px) rotate(6deg) translateX(3px) skew(2deg);
    }
    80% {
        transform: translateY(3px) rotate(-4deg) translateX(-1px) skew(-1deg);
    }
}

@keyframes autumn-colors {
    0% { color: var(--text-light); }
    20% { color: #d35400; } /* Citrouille */
    40% { color: #e67e22; } /* Carotte */
    60% { color: #f1c40f; } /* Or */
    80% { color: #a04000; } /* Terre de Sienne */
    100% { color: var(--text-light); }
}

.app-header p {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Sections */
.sound-section {
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
}

.sound-section h2 {
    margin-bottom: 20px;
    color: var(--text-light);
    font-size: 1.5rem;
}

/* Sound Grids */
.sound-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.sound-pad {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--pad-bg);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
    min-height: 100px;
    position: relative;
    overflow: hidden;
}

/* Volume Gauge */
.volume-gauge {
    position: absolute;
    bottom: 8px;
    left: 15%;
    width: 70%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.volume-gauge-fill {
    height: 100%;
    background: #fff;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s ease;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

.sound-pad.show-volume .volume-gauge {
    opacity: 1;
}

.sound-pad.active .volume-gauge-fill {
    background: #fff;
}


.sound-pad:hover {
    background: var(--pad-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.sound-pad.active {
    background: var(--pad-active);
    border-color: var(--text-light);
    box-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
}

.sound-pad i {
    font-size: 2rem;
    margin-bottom: 8px;
}

.sound-pad span {
    text-align: center;
}

/* Scènes */
.sound-section-note {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 12px;
    max-width: 60ch;
}

.scene-pad .scene-state {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: normal;
    margin-top: 6px;
}

.scene-pad.active .scene-state {
    color: var(--text-light);
}

.scene-pad.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Controls */
.controls-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    justify-content: center;
}

.mode-btn {
    padding: 12px 24px;
    background: var(--pad-bg);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    color: var(--text-dark);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mode-btn:hover {
    background: var(--pad-hover);
}

.mode-btn.active {
    background: var(--pad-active);
    border-color: var(--text-light);
}

/* Timer Styles */
.timer-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.timer-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 400px;
}

.timer-input-group {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.input-wrapper input {
    width: 70px;
    height: 50px;
    background: var(--secondary-bg);
    border: 2px solid var(--accent);
    border-radius: 8px;
    color: white;
    font-size: 1.5rem;
    text-align: center;
    outline: none;
    transition: border-color 0.3s ease;
}

.input-wrapper input:focus {
    border-color: var(--text-light);
}

.input-wrapper span {
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.7;
}

.timer-presets {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.timer-btn {
    padding: 12px 20px;
    background: var(--pad-bg);
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    color: var(--text-dark);
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.timer-btn.primary {
    background: var(--accent);
    min-width: 150px;
    font-weight: bold;
}

.timer-btn.primary:hover {
    background: var(--pad-hover);
}

.timer-btn:hover {
    background: var(--pad-hover);
    transform: translateY(-2px);
}

.timer-btn.active {
    background: var(--pad-active);
    border-color: var(--text-light);
}

.timer-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--text-light);
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.3s ease;
    width: 100%;
    max-width: 400px;
}

.timer-text {
    font-size: 1.2rem;
    opacity: 0.9;
}

#time-left {
    color: var(--text-light);
    font-family: 'Courier New', Courier, monospace;
    font-size: 3rem;
    font-weight: bold;
    text-shadow: 0 0 15px rgba(233, 69, 96, 0.5);
}

.cancel-btn {
    padding: 8px 16px;
    background: #e74c3c;
    border: none;
    border-radius: var(--border-radius);
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
}

.cancel-btn:hover {
    background: #c0392b;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Visualizer */
.visualizer-section {
    text-align: center;
    margin-bottom: 40px;
}

#visualizer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background: transparent;
    border-radius: 0;
    backdrop-filter: none;
}

/* Footer */
.app-footer {
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .app-container {
        padding: 10px 10px calc(128px + env(safe-area-inset-bottom, 0px));
    }

    #install-banner {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    #install-banner > span {
        flex: 1 1 calc(100% - 44px);
    }

    #install-banner .timer-btn {
        flex: 1 0 100%;
        width: 100%;
        min-width: 0;
    }

    #install-banner .modal-close {
        margin-left: auto;
    }

    .app-header h1 {
        font-size: 2rem;
    }

    .sound-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 10px;
    }

    .sound-pad {
        padding: 15px;
        min-height: 80px;
    }

    .sound-pad i {
        font-size: 1.5rem;
    }

    .controls-row {
        flex-direction: column;
        align-items: center;
    }

    #volume-controls {
        grid-template-columns: 1fr;
    }
}

/* Loading animation */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--text-light);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== Portage Android : mixeur, presets, thème dynamique ===== */

:root {
    --accent: #e94560;
}

.mixer-top {
    gap: 12px;
    flex-wrap: wrap;
}

.transport-row {
    margin-top: 12px;
}

.timer-btn:disabled,
.cancel-btn:disabled,
.mode-btn:disabled {
    opacity: 0.4;
    cursor: default;
    transform: none;
}

.mixer-label {
    color: var(--text-light);
    font-size: 0.95rem;
}

#global-volume {
    flex: 1;
    min-width: 140px;
    accent-color: var(--accent);
}

#mixer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.mixer-row {
    display: grid;
    grid-template-columns: 70px 1fr 1fr auto;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.85rem;
    color: var(--text-light);
}

.mixer-row input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
}

.mixer-row .mixer-val {
    font-size: 0.75rem;
    opacity: 0.8;
    min-width: 88px;
}

.mixer-empty {
    color: var(--text-light);
    opacity: 0.6;
    font-size: 0.9rem;
    text-align: center;
    padding: 8px;
}

.preset-browser {
    margin-bottom: 14px;
}

.preset-search-wrap {
    position: relative;
    margin-bottom: 9px;
}

.preset-search-wrap i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.preset-search-wrap input {
    width: 100%;
    padding: 11px 13px 11px 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    color: var(--text-dark);
    font-size: 0.95rem;
}

.preset-filter-row {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 2px 1px 7px;
    scrollbar-width: thin;
}

.preset-filter {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dark);
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
}

.preset-filter.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.preset-results-count {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

#preset-grid[hidden],
.preset-grid-empty[hidden] {
    display: none;
}

.preset-grid-empty {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 22px 14px;
    text-align: center;
    color: var(--text-muted);
}

.preset-grid-empty i {
    color: var(--text-light);
    font-size: 1.7rem;
}

.preset-grid-empty strong {
    color: var(--text-light);
}

[data-theme="light"] .preset-search-wrap input {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(28, 35, 64, 0.18);
}

[data-theme="light"] .preset-filter {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(28, 35, 64, 0.12);
}

[data-theme="light"] .preset-filter.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.preset-card {
    position: relative;
}

.preset-card .preset-icon {
    font-size: 1.8rem;
}

.preset-card .preset-del {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-light);
    opacity: 0.7;
    cursor: pointer;
    font-size: 0.9rem;
}

.preset-card .preset-edit {
    position: absolute;
    top: 4px;
    left: 6px;
    background: none;
    border: none;
    color: var(--text-light);
    opacity: 0.7;
    cursor: pointer;
    font-size: 0.9rem;
}

.preset-card .preset-del:hover {
    opacity: 1;
}

.preset-card .preset-edit:hover {
    opacity: 1;
}

.preset-card .preset-pin {
    position: absolute;
    bottom: 4px;
    right: 6px;
    background: none;
    border: none;
    opacity: 0.55;
    cursor: pointer;
    font-size: 0.85rem;
}

.preset-card .preset-pin:hover {
    opacity: 1;
}

#packs-grid {
    grid-template-columns: minmax(0, 1fr);
}

.pack-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.pack-card .pack-icon {
    flex: 0 0 auto;
    font-size: 2.2rem;
    display: block;
    margin-bottom: 8px;
}

.pack-card .pack-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-light);
    display: block;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.pack-card .pack-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: block;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.pack-card .pack-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    display: block;
    margin-bottom: 8px;
}

.pack-card .pack-sounds {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    margin-bottom: 12px;
}

.pack-card .pack-sound-tag {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    gap: 5px;
    max-width: 100%;
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
}

.pack-card .pack-sound-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pack-card .pack-sound-tag > small,
.pack-card .pack-sound-tag > .audio-new-badge,
.pack-card .pack-sound-tag > .audio-date {
    flex: 0 0 auto;
    white-space: nowrap;
}

.pack-card .pack-sound-tag small {
    padding: 1px 4px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-light);
    font-size: 0.58rem;
    text-transform: uppercase;
}

.pack-card .pack-sound-tag.type-effects small {
    color: #f0b36d;
}

.pack-card .pack-sound-tag.missing {
    color: #ff9a9a;
}

.audio-new-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(126, 224, 129, 0.18);
    color: #7ee081;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: middle;
}

.card-status-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.card-corner-ribbon {
    position: absolute;
    top: 13px;
    right: -34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 112px;
    padding: 5px 0;
    transform: rotate(45deg);
    border: 1px solid rgba(126, 224, 129, 0.5);
    background: linear-gradient(135deg, #2f8f52, #1d6339);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.25);
    color: #eaffef;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.card-corner-ribbon::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid rgba(20, 65, 36, 0.9);
    border-left: 7px solid transparent;
}

.card-status-layer.library .card-corner-ribbon {
    right: auto;
    left: -34px;
    transform: rotate(-45deg);
}

.card-status-layer.library .card-corner-ribbon::after {
    right: auto;
    left: -1px;
    border-top: 7px solid rgba(20, 65, 36, 0.9);
    border-right: 7px solid transparent;
    border-left: 0;
}

.card-state-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(18, 25, 48, 0.86);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
    color: var(--text-light);
    font-size: 0.8rem;
}

.card-state-badge.owned {
    border-color: rgba(126, 224, 129, 0.55);
    background: rgba(30, 82, 47, 0.9);
    color: #b6f5bd;
}

.card-state-badge.locked {
    border-color: rgba(240, 179, 109, 0.55);
    background: rgba(92, 57, 26, 0.9);
    color: #ffd39c;
}

.card-status-layer.library .card-state-badge {
    left: auto;
    right: 56px;
}

.audio-date {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-style: normal;
    white-space: nowrap;
}

.pack-card .pack-unlock-btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: auto;
}

.pack-legal-note {
    margin: 14px 2px 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.pack-legal-note a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.pack-legal-note a:hover {
    text-decoration: underline;
}

.library-launch-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-dark);
    text-align: left;
    cursor: pointer;
}

.library-launch-btn:hover {
    background: rgba(255, 255, 255, 0.11);
}

.library-launch-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 1.1rem;
}

.library-launch-copy {
    min-width: 0;
    flex: 1;
}

.library-launch-copy strong,
.library-launch-copy small {
    display: block;
}

.library-launch-copy strong {
    color: var(--text-light);
    font-size: 1rem;
}

.library-launch-copy small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.library-modal {
    width: min(980px, 96vw);
}

.library-search-wrap {
    position: relative;
    margin-bottom: 14px;
}

.library-search-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.library-search-wrap input,
.library-select-row select {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    color: var(--text-dark);
}

.library-search-wrap input {
    padding: 12px 14px 12px 42px;
    font-size: 1rem;
}

.library-filter-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 1px 8px;
    scrollbar-width: thin;
}

.library-filter {
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-dark);
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}

.library-filter.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.library-select-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 6px 0 14px;
}

.library-select-row label {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.library-select-row select {
    display: block;
    margin-top: 5px;
    padding: 9px 10px;
    font-size: 0.9rem;
}

.library-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 12px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.library-results-head button:disabled {
    opacity: 0.4;
    cursor: default;
}

.library-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.library-grid[hidden],
.library-empty[hidden] {
    display: none;
}

.library-card {
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.library-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.library-card-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.7rem;
}

.library-favorite {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
}

.library-favorite.active {
    color: #f5b301;
    border-color: rgba(245, 179, 1, 0.45);
}

.library-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 9px;
}

.library-badge {
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    font-size: 0.7rem;
}

.library-badge.owned {
    color: #7bd88f;
}

.library-badge.locked {
    color: #f0b36d;
}

.library-card h3 {
    color: var(--text-light);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.library-card p {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.library-sounds {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 11px 0;
}

.library-sound-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.library-sound-tag small {
    color: var(--text-light);
    font-size: 0.55rem;
    text-transform: uppercase;
}

.library-sound-tag.missing {
    color: #ff9a9a;
    background: rgba(244, 67, 54, 0.12);
}

.library-badge.new {
    color: #7ee081;
    background: rgba(126, 224, 129, 0.14);
}

.library-date {
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
}

.library-sound-tag .audio-new-badge {
    margin-left: 0;
    padding: 1px 4px;
    font-size: 0.52rem;
}

.library-missing-warning {
    color: #ff9a9a !important;
}

.library-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}

.library-card-actions .timer-btn,
.library-card-actions .cancel-btn {
    flex: 1 1 120px;
    min-width: 0;
}

.library-empty {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 18px;
    text-align: center;
    color: var(--text-muted);
}

.library-empty i {
    font-size: 2rem;
    color: var(--text-light);
}

.library-empty strong {
    color: var(--text-light);
}

[data-theme="light"] .library-launch-btn,
[data-theme="light"] .library-card,
[data-theme="light"] .library-filter,
[data-theme="light"] .library-favorite,
[data-theme="light"] .library-card-icon,
[data-theme="light"] .library-sound-tag,
[data-theme="light"] .library-badge {
    background: rgba(255, 255, 255, 0.62);
    border-color: rgba(28, 35, 64, 0.12);
}

[data-theme="light"] .library-filter.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

[data-theme="light"] .library-launch-btn:hover {
    background: rgba(255, 255, 255, 0.82);
}

[data-theme="light"] .library-search-wrap input,
[data-theme="light"] .library-select-row select {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(28, 35, 64, 0.18);
}

@media (min-width: 600px) {
    .library-select-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    .library-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 600px) {
    #packs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 960px) {
    #packs-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.preset-card.locked {
    opacity: 0.7;
    cursor: not-allowed;
}

.preset-card .preset-lock {
    top: 10px;
    left: 10px;
    right: auto;
    z-index: 3;
    cursor: help;
}

#preset-editor {
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
}

#preset-name {
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-light);
    margin-bottom: 10px;
    font-size: 1rem;
}

/* Compte + support */
.sound-section h3 {
    color: var(--text-light);
    margin: 16px 0 10px;
    font-size: 1.05rem;
}

#auth-forms input,
#support-subject,
#support-message {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
}

#support-subject,
#support-message {
    width: 100%;
    margin-bottom: 10px;
}

#support-message {
    resize: vertical;
}

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.form-error {
    color: #ff6b6b;
    text-align: center;
}

#support-msg {
    text-align: center;
}

#support-msg.ok {
    color: #66bb6a;
}

#support-msg.ko {
    color: #ff6b6b;
}

#account-email {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 10px;
}

/* Formulaire compte — design moderne */
.auth-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 22px 18px 16px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
    max-width: 460px;
    margin: 0 auto;
}
.auth-hero {
    text-align: center;
    margin-bottom: 16px;
}
.auth-avatar {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 30% 30%, #ff7a8a, var(--accent) 65%, #7a2a3a);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(233,69,96,0.45);
}
.auth-hero h3 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    color: #fff;
    letter-spacing: 0.2px;
}
.auth-hero p {
    margin: 0;
    font-size: 0.88rem;
    opacity: 0.78;
    line-height: 1.4;
}
.auth-field[hidden] {
    display: none !important;
}
.auth-tabs {
    display: flex;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin: 14px auto 18px;
    max-width: 340px;
}
.auth-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.78);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.06s ease;
}
.auth-tab:active { transform: scale(0.98); }
.auth-tab.active {
    background: #fff;
    color: #1a1a2e;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.auth-field label {
    color: rgba(255,255,255,0.92);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    margin-left: 2px;
}
.label-optional {
    font-weight: 600;
    opacity: 0.65;
    font-size: 0.78rem;
    margin-left: 6px;
    background: rgba(255,255,255,0.10);
    padding: 2px 7px;
    border-radius: 999px;
}
.input-group {
    position: relative;
    display: flex;
    align-items: center;
}
.input-icon {
    position: absolute;
    left: 12px;
    color: rgba(255,255,255,0.62);
    font-size: 0.95rem;
    pointer-events: none;
}
.auth-field input {
    width: 100%;
    padding: 13px 44px 13px 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(0,0,0,0.32);
    color: #fff;
    font-size: 0.98rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.auth-field input::placeholder { color: rgba(255,255,255,0.42); }
.auth-field input:focus {
    border-color: rgba(233,69,96,0.85);
    background: rgba(0,0,0,0.42);
    box-shadow: 0 0 0 4px rgba(233,69,96,0.16);
}
.auth-field input.invalid {
    border-color: rgba(255,107,107,0.95);
    box-shadow: 0 0 0 4px rgba(255,107,107,0.16);
}
.auth-field input.valid {
    border-color: rgba(102,187,106,0.95);
    box-shadow: 0 0 0 4px rgba(102,187,106,0.14);
}
.input-action {
    position: absolute;
    right: 6px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.82);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.06s ease;
}
.input-action:hover { background: rgba(255,255,255,0.14); }
.input-action:active { transform: scale(0.96); }
.field-hint {
    font-size: 0.78rem;
    opacity: 0.72;
    margin-left: 2px;
    line-height: 1.3;
}
.field-hint.ok {
    color: #7ee081;
    opacity: 1;
}
.field-hint.ko {
    color: #ff8e8e;
    opacity: 1;
}
.auth-submit {
    width: 100%;
    margin-top: 4px;
    padding: 13px 16px;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(135deg, var(--accent), #ff6b7a);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(233,69,96,0.32);
    transition: transform 0.06s ease, filter 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
.auth-submit:hover { filter: brightness(1.06); box-shadow: 0 12px 28px rgba(233,69,96,0.38); }
.auth-submit:active { transform: scale(0.99); }
.auth-submit:disabled { opacity: 0.62; cursor: not-allowed; box-shadow: none; }
.btn-icon { font-size: 0.95rem; opacity: 0.95; }
.auth-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,71,87,0.14);
    border: 1px solid rgba(255,71,87,0.28);
    color: #ffd1d6;
    font-size: 0.88rem;
    line-height: 1.35;
}
.auth-error i { margin-top: 2px; color: #ff6b6b; }
.auth-success {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(74, 190, 109, 0.14);
    border: 1px solid rgba(74, 190, 109, 0.32);
    color: #c9f7d2;
    font-size: 0.88rem;
    line-height: 1.35;
}
.auth-success strong { color: #e5ffe9; }
.auth-footnote {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
    font-size: 0.82rem;
    line-height: 1.4;
}
.auth-footnote i { margin-top: 2px; opacity: 0.9; }

/* Compte connecté — dashboard moderne */
.profile-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
    margin-bottom: 14px;
}
.profile-main {
    display: flex;
    align-items: center;
    gap: 14px;
}
.profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ff7a8a, var(--accent));
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(233,69,96,0.35);
    text-transform: uppercase;
}
.profile-meta { flex: 1; min-width: 0; }
.profile-name {
    font-weight: 800;
    font-size: 0.98rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-sub {
    font-size: 0.82rem;
    opacity: 0.72;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plan-badge {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
}
.plan-badge.premium {
    background: linear-gradient(135deg, #ffd27a, #ff7a8a);
    color: #1a1a2e;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(255,122,138,0.28);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 14px;
}
.stats-grid .admin-stat {
    text-align: center;
    padding: 10px 8px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}
.stats-grid .mixer-empty {
    grid-column: 1 / -1;
    background: rgba(255,255,255,0.06);
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 12px;
    padding: 14px;
}
.account-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}
.btn-ghost, .btn-danger-ghost {
    flex: 1;
    padding: 11px 12px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.06s ease, background 0.18s ease, border-color 0.18s ease;
}
.btn-ghost {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,0.13); }
.btn-danger-ghost {
    background: rgba(255,71,87,0.10);
    border: 1px solid rgba(255,71,87,0.22);
    color: #ffd1d6;
}
.btn-danger-ghost:hover { background: rgba(255,71,87,0.16); border-color: rgba(255,71,87,0.32); }
.btn-ghost:active, .btn-danger-ghost:active { transform: scale(0.99); }
.account-section {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 14px;
}
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.section-head h3 {
    margin: 0;
    font-size: 0.96rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}
.section-count {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.78);
}
.preset-cloud-grid {
    min-height: 72px;
}
.preset-cloud-grid:empty { display: none; }
.verify-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,193,7,0.18), rgba(255,122,138,0.14));
    border: 1px solid rgba(255,193,7,0.28);
    color: #fff;
    margin-bottom: 12px;
}
.verify-banner i { font-size: 1.2rem; color: #ffd54f; }
.verify-text { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.verify-text strong { font-size: 0.92rem; }
.verify-text span { font-size: 0.78rem; opacity: 0.78; }
/* Grille et non flex : la modale Compte est étroite (~520px) même sur un grand
   écran, donc une mise en page en flex la coupait en trois colonnes et le
   titre se retrouvait sur cinq lignes. Le bouton passe sur sa propre ligne,
   quelle que soit la largeur. */
.premium-upsell {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px 14px;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #2a1a3a 50%, #3a2a1a 100%);
    border: 1px solid rgba(255,210,122,0.22);
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    margin-bottom: 14px;
}
.premium-upsell .auth-submit.small { grid-column: 1 / -1; width: 100%; }
.premium-upsell-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffd27a, #ff7a8a);
    color: #1a1a2e;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.premium-upsell-text { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.premium-upsell-text strong { color: #ffd27a; font-size: 0.96rem; }
.premium-upsell-text span { font-size: 0.78rem; opacity: 0.76; color: #fff; }

/* ---------- Offres : astérisque en haut, explication discrète en bas ----------
   Tout était dans un paragraphe d'introduction centré, avant même les
   formules. La règle courte passe en haut, l'explication et les conditions
   en très petit en bas, sous les cartes. */
.plans-asterisk {
    margin: 0 0 14px;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.62);
}

.plans-footnote {
    margin: 18px 0 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.5);
}

.plans-footnote a { color: rgba(255, 255, 255, 0.62); }

.access-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 22px 0 10px;
    font-size: 1rem;
    color: #fff;
}

/* ---------- Compte : plafond du jour et sections repliées ----------
   Le panneau s'ouvrait d'un bloc : en-tête, bannière, mot de passe et presets
   tout visibles à la fois. Sur un écran étroit, le bandeau se réduisait à un
   titre coupé sur cinq lignes et les deux statistiques se retrécissaient
   jusqu'à scinder « 1 h 25 ». */
.today-quota {
    margin-top: 14px;
    padding: 11px 13px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.today-quota-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.today-quota-label {
    font-size: 0.78rem;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.66);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Chiffre en tabular-nums : il change chaque minute, il ne doit pas sauter
   horizontalement à chaque rafraîchissement. */
.today-quota-value {
    font-weight: 800;
    font-size: 0.95rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.today-quota-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}

.today-quota-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #e94560), #ff8a5c);
    transition: width 0.35s ease;
}

.today-quota-bar > span.unlimited {
    background: linear-gradient(90deg, #4ecb8d, #8be0b0);
}

.today-quota-hint {
    margin: 7px 0 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.6);
}

.account-details {
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    margin-bottom: 10px;
    overflow: hidden;
}

.account-details > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
    color: #fff;
    list-style: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Safari affiche un triangle même avec list-style: none */
.account-details > summary::-webkit-details-marker { display: none; }

.account-details > summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.55;
    transition: transform 0.2s ease;
}

.account-details[open] > summary::after { transform: rotate(180deg); }
.account-details[open] > summary { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.account-details > *:not(summary) {
    padding: 0 14px 14px;
}

.account-details .section-count { margin-left: auto; }

.activity-list {
    display: flex;
    flex-direction: column;
}

.activity-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.activity-line:last-child { border-bottom: none; }
.activity-line > span { color: rgba(255, 255, 255, 0.62); flex: 0 0 auto; }

/* Les noms de sons sont longs : ils doivent passer à la ligne, pas réduire la
   ligne « détente » jusqu'à la faire disparaître. */
.activity-line > strong {
    color: #fff;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

.account-empty {
    margin: 4px 0;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 520px) {
    /* Le bandeau est passé en grille ci-dessus, il tient à toute largeur. Il
       reste les boutons d'action, illisibles côte à côte sur un écran étroit. */
    .account-actions { flex-direction: column; }
    .account-actions > button { width: 100%; }
}

.btn-ghost.small, .auth-submit.small { padding: 8px 12px; font-size: 0.86rem; border-radius: 10px; }
.empty-state {
    text-align: center;
    padding: 18px 12px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.78);
}
.empty-state .empty-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.86);
}
.empty-state p { margin: 0; font-size: 0.92rem; line-height: 1.35; }
.empty-state p span { font-size: 0.82rem; opacity: 0.72; }
.auth-submit.secondary {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: none;
    color: #fff;
}
.auth-submit.secondary:hover { background: rgba(255,255,255,0.14); }

.support-intro {
    text-align: center;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* Sans ça, un <a> dans une intro prenait le bleu par défaut du navigateur :
   quasi illisible sur le fond sombre des modales. */
.support-intro a,
.field-hint a,
.purchases-footnote a {
    color: var(--accent, #e94560);
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 1;
}

.ticket-row {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.ticket-row .ticket-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.ticket-row .ticket-close {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    padding: 2px 10px;
    font-size: 0.8rem;
}

.ticket-row.closed {
    opacity: 0.55;
}

/* Espace admin + offres + fil tickets */
.admin-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}

.admin-stat {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.9rem;
    color: var(--text-light);
}

.admin-stat strong {
    font-size: 1.2rem;
    margin-right: 6px;
}

.thread-msg {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.thread-msg.admin {
    border-left: 3px solid var(--accent);
}

.thread-msg .thread-meta {
    font-size: 0.75rem;
    opacity: 0.65;
    margin-bottom: 2px;
}

.plan-card {
    text-align: center;
}

.plan-price {
    font-size: 1.4rem;
    font-weight: bold;
}

.plan-card ul {
    list-style: none;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 6px;
}

.plan-card li {
    margin-bottom: 4px;
}

.user-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.user-row .user-mail {
    font-weight: bold;
}

.user-row select {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 4px 6px;
}

.user-row button {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    padding: 2px 10px;
    font-size: 0.8rem;
}

.admin-audio-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.admin-audio-toolbar input[type="search"] {
    flex: 1 1 220px;
    min-width: 0;
}

.admin-audio-row,
.admin-audio-pack-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
}

.admin-audio-info,
.admin-audio-pack-row > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.admin-audio-info strong,
.admin-audio-pack-row strong {
    color: var(--text-light);
    overflow-wrap: anywhere;
}

.admin-audio-info span,
.admin-audio-info small,
.admin-audio-pack-row span {
    color: var(--text-muted);
    font-size: 0.78rem;
    overflow-wrap: anywhere;
}

.admin-audio-info a {
    color: #8ecbff;
}

.admin-audio-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.admin-audio-actions button {
    font-size: 0.75rem;
    padding: 5px 8px;
}

.admin-audio-form {
    margin: 12px 0 18px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.admin-audio-form h3 {
    margin-top: 0;
}

/* Chaque champ sur sa ligne, libellé au-dessus, champ en dessous.
   Sans cette règle, un <label> est en ligne : le texte, l'input et le champ
   suivant se suivaient sur une même ligne et le dernier était coupé sur
   mobile. C'était le cas de tous les formulaires de l'admin, pas seulement
   des plafonds. */
.admin-audio-form > label:not(.checkline):not(.label-optional) {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.admin-audio-form > label:not(.checkline):not(.label-optional) input,
.admin-audio-form > label:not(.checkline):not(.label-optional) select,
.admin-audio-form > label:not(.checkline):not(.label-optional) textarea {
    width: 100%;
    box-sizing: border-box;
}

/* ---------- Champs de formulaire dans l'administration ----------
   Aucun champ de l'admin n'avait de style : `.admin-audio-form` ne faisait
   que leur donner une largeur. Tous tombaient donc sur l'habillage par
   défaut du navigateur — fond blanc, texte noir, 19 px de haut — au milieu
   d'une interface sombre. C'est ce qui donnait l'impression que l'admin était
   cassé, alors qu'il fonctionnait.

   Règle volontairement limitée aux formulaires d'administration : les autres
   écrans ont chacun leur habillage (bibliothèque, connexion, recherche), et
   les modifier ici les aurait cassés. */
.admin-audio-form input[type="text"],
.admin-audio-form input[type="email"],
.admin-audio-form input[type="password"],
.admin-audio-form input[type="url"],
.admin-audio-form input[type="number"],
.admin-audio-form input[type="search"],
.admin-audio-form input[type="date"],
.admin-audio-form input[type="tel"],
.admin-audio-form select,
.admin-audio-form textarea,
.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--text-dark);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.35;
}

.admin-audio-form input::placeholder,
.admin-audio-form textarea::placeholder,
.admin-form-grid input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.admin-audio-form input:focus,
.admin-audio-form select:focus,
.admin-audio-form textarea:focus,
.admin-form-grid input:focus,
.admin-form-grid select:focus,
.admin-form-grid textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.22);
}

.admin-audio-form select option,
.admin-form-grid select option {
    background: #16213e;
    color: #ffffff;
}

.admin-audio-form textarea,
.admin-form-grid textarea {
    min-height: 90px;
    resize: vertical;
}

[data-theme="light"] .admin-audio-form input[type="text"],
[data-theme="light"] .admin-audio-form input[type="email"],
[data-theme="light"] .admin-audio-form input[type="password"],
[data-theme="light"] .admin-audio-form input[type="url"],
[data-theme="light"] .admin-audio-form input[type="number"],
[data-theme="light"] .admin-audio-form input[type="search"],
[data-theme="light"] .admin-audio-form input[type="date"],
[data-theme="light"] .admin-audio-form input[type="tel"],
[data-theme="light"] .admin-audio-form select,
[data-theme="light"] .admin-audio-form textarea,
[data-theme="light"] .admin-form-grid input,
[data-theme="light"] .admin-form-grid select,
[data-theme="light"] .admin-form-grid textarea {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(28, 35, 64, 0.22);
    color: var(--text-dark);
}

[data-theme="light"] .admin-audio-form input::placeholder,
[data-theme="light"] .admin-form-grid input::placeholder {
    color: rgba(28, 35, 64, 0.45);
}

[data-theme="light"] .admin-audio-form select option,
[data-theme="light"] .admin-form-grid select option {
    background: #ffffff;
    color: #1c2340;
}

/* Une case à cocher reste sur une ligne avec son libellé. */
.admin-audio-form > label.checkline,
.admin-audio-form > label.label-optional {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.admin-audio-form > label.label-optional input { width: auto; }

[data-theme="light"] .admin-audio-form > label:not(.checkline):not(.label-optional) {
    color: var(--text-muted);
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.admin-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.admin-form-grid input,
.admin-form-grid select,
.admin-form-grid textarea {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    padding: 8px;
    font: inherit;
}

.admin-form-grid .admin-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.admin-form-grid .admin-check input {
    width: auto;
}

.admin-span {
    grid-column: 1 / -1;
}

.admin-audio-pack-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding-top: 12px;
}

.admin-audio-pack-head h3 {
    margin: 0;
}

#account-plan {
    text-align: center;
    opacity: 0.9;
    margin-bottom: 10px;
}

#thread-reply {
    flex: 1;
    min-width: 160px;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 1rem;
    font-family: inherit;
}

/* ===== P0 : chargement pads, toast, focus visible (pluie-sur-verre inchangée) ===== */

.sound-pad {
    position: relative;
}

.sound-pad.loading {
    pointer-events: none;
    opacity: 0.75;
}

.sound-pad.loading::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* ===== Transport : animations clic + états en cours / pris en compte ===== */

/* Pression tactile sur les pads et les boutons du dock */
.sound-pad:active {
    transform: scale(0.95);
}

.dock-btn {
    transition: opacity 0.2s ease, background 0.2s ease, transform 0.12s ease;
}

.dock-btn:active:not(:disabled) {
    transform: scale(0.9);
}

/* Prise en compte : petit "pop" à l'activation du pad */
@keyframes padPop {
    0% { transform: scale(0.94); }
    60% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

.sound-pad.active {
    animation: padPop 0.35s ease;
}

/* En cours : clignotement pendant le fondu d'arrêt global */
@keyframes padBlink {
    50% { opacity: 0.35; }
}

.sound-pad.stopping {
    animation: padBlink 0.5s ease-in-out infinite;
    pointer-events: none;
}

.sound-pad.audio-transitioning {
    opacity: 0.65;
    pointer-events: none;
}

#t-playpause.busy {
    animation: padBlink 0.6s ease-in-out infinite;
    pointer-events: none;
}

/* Pause : pads actifs en pulsation lente + bouton lecture qui clignote */
@keyframes pausePulse {
    50% { opacity: 0.8; box-shadow: 0 0 8px rgba(233, 69, 96, 0.35); }
}

body.is-paused .sound-pad.active {
    animation: pausePulse 1.6s ease-in-out infinite;
}

body.is-paused #t-playpause {
    animation: padBlink 1s ease-in-out infinite;
}

/* Stop occupé pendant le fondu */
#t-stop.busy {
    animation: padBlink 0.5s ease-in-out infinite;
}

#toast {
    position: fixed;
    left: 50%;
    /* au-dessus de la barre de lecture, sinon le message passait dessous */
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    transform: translateX(-50%) translateY(20px);
    background: rgba(10, 10, 25, 0.95);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 0.95rem;
    max-width: 90vw;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 2000;
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#install-banner {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 16px;
    background: rgba(10, 10, 25, 0.97);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.9rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

#install-banner .timer-btn {
    white-space: nowrap;
}

:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ===== Mode clair (verre dépoli jour, pluie conservée en bleu) ===== */

[data-theme="light"] {
    --primary-bg: #dbe4f2;
    --secondary-bg: #bccde6;
    --pad-bg: rgba(255, 255, 255, 0.65);
    --pad-hover: rgba(255, 255, 255, 0.95);
    --text-dark: #1c2340;
    --text-light: #c2254e;
    --text-muted: #4d556b;
    --accent: #c2254e;
}

[data-theme="light"] :focus-visible {
    outline-color: #1c2340;
}

/* Panneau Compte et Offres en mode clair.
   Ces blocs utilisaient du blanc sur fond translucide, ce qui n'existe que sur
   le thème sombre : en mode clair le texte devenait blanc sur blanc (titre du
   compte, libellés d'activité, boutons d'action tous illisibles). */
[data-theme="light"] .profile-name { color: var(--text-dark); }
[data-theme="light"] .profile-sub { color: var(--text-muted); }
[data-theme="light"] .plan-badge {
    background: rgba(194, 37, 78, 0.10);
    color: var(--accent);
}

[data-theme="light"] .today-quota {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(28, 35, 64, 0.12);
}
[data-theme="light"] .today-quota-label,
[data-theme="light"] .today-quota-hint { color: var(--text-muted); }
[data-theme="light"] .today-quota-value { color: var(--text-dark); }
[data-theme="light"] .today-quota-bar { background: rgba(28, 35, 64, 0.12); }

[data-theme="light"] .account-details {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(28, 35, 64, 0.12);
}
[data-theme="light"] .account-details > summary { color: var(--text-dark); }
[data-theme="light"] .account-details[open] > summary { border-bottom-color: rgba(28, 35, 64, 0.10); }
[data-theme="light"] .activity-line { border-bottom-color: rgba(28, 35, 64, 0.10); }
[data-theme="light"] .activity-line > span { color: var(--text-muted); }
[data-theme="light"] .activity-line > strong { color: var(--text-dark); }
[data-theme="light"] .account-empty { color: var(--text-muted); }

[data-theme="light"] .plans-asterisk,
[data-theme="light"] .plans-footnote { color: var(--text-muted); }
[data-theme="light"] .plans-footnote { border-top-color: rgba(28, 35, 64, 0.12); }
[data-theme="light"] .plans-footnote a { color: var(--accent); }
[data-theme="light"] .access-quota { color: var(--text-muted); }

[data-theme="light"] .btn-ghost { color: var(--text-dark); border-color: rgba(28, 35, 64, 0.22); }
[data-theme="light"] .btn-danger-ghost { color: #a3122f; border-color: rgba(163, 18, 47, 0.32); }

[data-theme="light"] .app-header,
[data-theme="light"] .sound-section,
[data-theme="light"] .bottom-dock {
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 15px rgba(28, 35, 64, 0.12);
}

[data-theme="light"] .modal {
    background: linear-gradient(135deg, #eef3fa, #d5e1f2);
}

/* ===== Aide / onboarding ===== */

.help-keys {
    list-style: none;
    margin: 10px 0;
}

.help-keys li {
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.help-keys kbd {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom-width: 2px;
    background: rgba(0, 0, 0, 0.3);
    font-family: inherit;
    font-size: 0.85rem;
}

.onboard-step {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 8px;
}

/* ===== Menu burger + barre de lecture ===== */

.menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    padding: 8px;
    background: rgba(22, 33, 62, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--border-radius);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.menu[hidden] {
    display: none;
}

.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-dark);
    font-size: 0.95rem;
    cursor: pointer;
    text-align: left;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.menu-item.has-news {
    color: var(--accent);
}

.menu-item .nav-badge {
    position: static;
    margin-left: auto;
}

.news-entry {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.news-entry h4 {
    color: var(--text-light);
    margin-bottom: 6px;
    font-size: 0.95rem;
}

.news-entry ul {
    margin-left: 18px;
    font-size: 0.9rem;
}

.news-entry li {
    margin-bottom: 4px;
}

.install-steps {
    margin: 4px 0 8px 20px;
    font-size: 0.95rem;
    line-height: 1.7;
}

.install-steps li {
    margin-bottom: 8px;
}

[data-theme="light"] .menu {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(28, 35, 64, 0.12);
    box-shadow: 0 8px 30px rgba(28, 35, 64, 0.18);
}

[data-theme="light"] .menu-item:hover {
    background: rgba(28, 35, 64, 0.08);
}

/* Bouton lecture central proéminent */
.dock-btn.dock-main {
    opacity: 1;
}

.dock-btn.dock-main i {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
}

.dock-btn:disabled {
    opacity: 0.35;
}

/* Badge 2e lecture (autre onglet / PWA installée en parallèle) */
.peer-badge {
    align-self: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #ffd54f;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    padding: 3px 9px;
    margin-left: 4px;
    white-space: nowrap;
    animation: padBlink 1.2s ease-in-out infinite;
}

/* État lecture : halo sur le bouton central */
.dock-btn.playing {
    opacity: 1;
}

.dock-btn.playing i {
    filter: drop-shadow(0 0 6px var(--accent));
}

/* ===== Dock de navigation (style app mobile) + actions header ===== */

.app-header {
    position: relative;
    z-index: 100;
}

.header-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 8px;
}

.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-dark);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.icon-btn:hover {
    background: var(--pad-hover);
}

.bottom-dock {
    position: fixed;
    left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(22, 33, 62, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 22px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

.dock-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 64px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 14px;
    color: var(--text-dark);
    opacity: 0.75;
    font-size: 1.1rem;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.dock-btn span {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dock-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.dock-btn.has-news {
    opacity: 1;
    color: var(--accent);
}

.nav-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    text-align: center;
}

[data-theme="light"] .bottom-dock {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(28, 35, 64, 0.12);
    box-shadow: 0 8px 30px rgba(28, 35, 64, 0.18);
}

[data-theme="light"] .dock-btn:hover {
    background: rgba(28, 35, 64, 0.08);
}

[data-theme="light"] .icon-btn {
    border-color: rgba(28, 35, 64, 0.2);
    background: rgba(255, 255, 255, 0.5);
}

/* Le toast passe au-dessus du dock */
#toast {
    bottom: 96px;
}

.toast-update {
    background: linear-gradient(135deg, #1f2937, #111827);
    color: #f9fafb;
    border: 1px solid #e94560;
}
.toast-update button {
    pointer-events: auto;
    background: #e94560;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 6px 12px;
    cursor: pointer;
}

@media (max-width: 600px) {
    .bottom-dock {
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        transform: none;
        justify-content: space-around;
    }

    .dock-btn {
        min-width: 0;
        flex: 1;
    }
}

.modal {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius);
    background: linear-gradient(135deg, var(--primary-bg), var(--secondary-bg));
    color: var(--text-dark);
    padding: 0;
    width: min(560px, 94vw);
    max-height: 88vh;
}

.modal-wide {
    width: min(760px, 96vw);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    position: sticky;
    top: 0;
    background: inherit;
}

.modal-head h2 {
    color: var(--text-light);
    font-size: 1.25rem;
}

.modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    cursor: pointer;
}

.modal-close:hover {
    background: var(--accent);
}

.modal-body {
    padding: 16px 18px 20px;
    overflow-y: auto;
    max-height: calc(88vh - 65px);
}

.modal-body h3 {
    color: var(--text-light);
    margin: 16px 0 10px;
    font-size: 1.05rem;
}

/* ---------- Administration : une vraie largeur de travail ----------
   La modale d'admin est la plus dense de l'application (statistiques,
   transactions, formulaire PayPal, rapprochement, avoirs). Calée sur la
   largeur générique des autres modales, son contenu se tassait en colonne
   étroite et les onglets se coupaient. */
#admin-modal {
    width: min(1180px, 96vw);
    max-width: 96vw;
    max-height: 92vh;
    /* Un <dialog> ouvert en modal est centré par le navigateur ; on le dit
       explicitement, sinon un reset peut le laisser collé en haut à gauche. */
    margin: auto;
}

#admin-modal .modal-body {
    max-height: calc(92vh - 62px);
}

/* Onglets : ils passent à la ligne plutôt que de disparaître sur les côtés.
   « Tickets » et « Mentions légales » étaient illisibles. */
#admin-panel > .controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 16px;
}

#admin-panel > .controls-row > button {
    flex: 0 0 auto;
}

/* Sections de l'onglet Transactions : un cadre par bloc, sinon les titres se
   suivent et rien n'indique où une section finit et où la suivante commence. */
.admin-section {
    margin: 0 0 18px;
    padding: 16px 18px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}

.admin-section > h3 {
    margin: 0 0 8px;
    font-size: 1.02rem;
}

.admin-section > .field-hint:first-of-type {
    margin-top: 0;
}

/* Statistiques : la valeur au-dessus du libellé. Sur une seule ligne, « Payée1 »
   se lisait comme un mot. */
.admin-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 92px;
    padding: 9px 14px;
    line-height: 1.25;
}

.admin-stat strong {
    margin-right: 0;
    font-size: 1.15rem;
}

/* Alertes de sécurité : une vraie respiration entre elles, et un cadre pour
   qu'on les voie sans les lire comme du texte courant. */
.admin-alerte {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    line-height: 1.45;
}

#admin-billing-webhook[data-etat="ok"],
#admin-billing-mail[data-etat="ok"] {
    background: rgba(90, 210, 148, 0.10);
    border-color: rgba(90, 210, 148, 0.28);
    color: #7fe0ae;
}

#admin-billing-webhook[data-etat="alerte"],
#admin-billing-mail[data-etat="alerte"] {
    background: rgba(255, 120, 110, 0.10);
    border-color: rgba(255, 120, 110, 0.35);
    color: #ff9a8f;
    font-weight: 600;
}

/* Sur téléphone, huit onglets empilés repoussaient le contenu hors de
   l'écran : il fallait faire défiler huit boutons pour atteindre les
   transactions. Un bandeau horizontal qui défile garde l'accès et rend la
   page immédiatement utile. */
@media (max-width: 640px) {
    #admin-panel > .controls-row {
        /* `.controls-row` devient une colonne sous 600 px, pour les pavés de
           contrôle audio. Les onglets d'admin n'en ont rien à faire : on
           annule donc les deux propriétés, pas seulement le retour à la ligne.
           Centrer un contenu plus large que le conteneur le ferait déborder
           des deux côtés, sans moyen de revenir au début. */
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 4px;
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
    }

    #admin-panel > .controls-row > button {
        flex: 0 0 auto;
    }

    .admin-stats .admin-stat {
        min-width: 0;
        flex: 1 1 30%;
        padding: 8px 10px;
    }
}

@media (max-width: 820px) {
    #admin-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 94vh;
    }

    #admin-modal .modal-body {
        max-height: calc(94vh - 62px);
    }

    .admin-section {
        padding: 14px;
    }
}

@media (max-width: 600px) {
    .modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 94vh;
        margin-bottom: 0;
    }

    .modal-body {
        max-height: calc(94vh - 65px);
    }

    .admin-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-span {
        grid-column: auto;
    }

    .admin-audio-row,
    .admin-audio-pack-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-audio-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

.preset-edit-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    color: var(--text-light);
    font-size: 0.9rem;
    cursor: pointer;
}

.preset-edit-row input[type="range"] {
    accent-color: var(--accent);
}

.app-footer a {
    color: var(--text-light);
    opacity: 0.8;
}

/* Surcharge accent dynamique (défaut #e94560, piloté par son dominant) */
.sound-pad.active {
    background: var(--accent);
}

.timer-btn.primary,
.mode-btn.active {
    background: var(--accent);
}
/* Achat d'un pack : produit numérique + renoncement au droit de rétractation */
.checkout-pack {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--border-radius);
}

.checkout-pack .pack-icon {
    font-size: 1.9rem;
    line-height: 1;
}

.checkout-pack .pack-name {
    font-weight: 600;
}

.checkout-facts {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

.checkout-facts li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
}

.checkout-facts i {
    width: 18px;
    text-align: center;
    color: var(--accent, #e94560);
}

.waiver-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    margin-bottom: 12px;
    background: rgba(233, 69, 96, 0.08);
    border: 1px solid var(--accent, #e94560);
    border-radius: var(--border-radius);
    font-size: 0.92rem;
    line-height: 1.5;
    cursor: pointer;
}

.waiver-check input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--accent, #e94560);
}

.checkout-hint {
    font-size: 0.82rem;
    color: #a0a0b0;
    line-height: 1.5;
}

.checkout-hint a {
    color: var(--accent, #e94560);
}

/* Historique des achats */
.purchases-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.purchase-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.purchase-meta {
    display: block;
    font-size: 0.78rem;
    color: #9a9aab;
}

.purchase-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.purchase-state {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.purchase-state.paid {
    background: rgba(76, 175, 80, 0.18);
    color: #a5d6a7;
}

.purchase-state.pending {
    background: rgba(255, 193, 7, 0.16);
    color: #ffe082;
}

.purchase-amount {
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .purchase-row { flex-direction: column; align-items: flex-start; }
}

/* Boutons de la modale d'achat : pleine largeur, empilés en mobile */
.checkout-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

.checkout-actions .auth-submit {
    flex: 1 1 200px;
}

.checkout-actions .btn-ghost {
    flex: 0 1 auto;
    padding: 12px 18px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-light, #e0e0e0);
    font-size: 0.95rem;
    cursor: pointer;
}

.checkout-actions .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* Zone de message de la modale d'achat : masquée tant qu'elle est vide */
#checkout-status:empty {
    display: none;
}

.purchase-state.failed {
    background: rgba(233, 69, 96, 0.2);
    color: #ff9db0;
}

/* Doublon payé : ni refusé, ni en attente. L'argent est là, le pack non.
   Sans cet état distinct, l'administrateur lePrenait pour une attente. */
/* Alerte de sécurité : un webhook mal configuré, c'est de l'argent encaissé
   sans rien de débloqué. Rouge franc, pas un simple message d'information. */
#admin-billing-webhook[data-etat="alerte"] {
    color: #ff9a8f;
    font-weight: 600;
}

.purchase-state.duplicate {
    background: rgba(240, 170, 60, 0.16);
    color: #f0aa3c;
}

/* Bouton avoir : présent sur chaque transaction encaissée, donc aligné et
   discret pour ne pas concurrencer la ligne. */
.admin-purchase-row .avoir-btn {
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.78rem;
}

.purchase-retry {
    padding: 5px 11px;
    font-size: 0.78rem;
    white-space: nowrap;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: #cfcfda;
    cursor: pointer;
}

.purchase-retry:hover {
    border-color: var(--accent, #e94560);
    color: #fff;
}

.admin-purchase-row {
    align-items: flex-start;
}

/* ---------- Confirmation de paiement (retour de PayPal) ---------- */
#payment-modal {
    max-width: 460px;
    width: calc(100% - 32px);
    text-align: center;
}

.payment-status-icon {
    width: 72px;
    height: 72px;
    margin: 8px auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(233, 69, 96, 0.12);
}

.payment-status-icon.spinner::after {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--accent, #e94560);
    animation: payment-spin 0.9s linear infinite;
}

.payment-status-icon.success {
    background: rgba(76, 175, 80, 0.18);
    color: #a5d6a7;
    font-size: 2rem;
}

.payment-status-icon.failed {
    background: rgba(233, 69, 96, 0.18);
    color: #ff9db0;
    font-size: 2rem;
}

@keyframes payment-spin {
    to { transform: rotate(360deg); }
}

.payment-status-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.payment-status-text {
    color: #c7c7d2;
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 18px;
}

.payment-status-steps {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
    font-size: 0.9rem;
}

.payment-status-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    color: #8f8fa0;
}

.payment-status-steps li::before {
    content: "○";
    width: 18px;
    text-align: center;
    color: #6a6a7a;
}

.payment-status-steps li.active {
    color: #e0e0e0;
}

.payment-status-steps li.active::before {
    content: "◐";
    color: var(--accent, #e94560);
}

.payment-status-steps li.done {
    color: #a5d6a7;
}

.payment-status-steps li.done::before {
    content: "●";
    color: #66bb6a;
}

.payment-status-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.payment-status-actions .auth-submit,
.payment-status-actions .btn-ghost {
    flex: 0 1 auto;
    min-width: 140px;
    padding: 12px 18px;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    cursor: pointer;
}

.payment-pack-name {
    font-weight: 600;
    color: var(--text-light, #e0e0e0);
}

.plan-card.current {
    border-color: var(--accent, #e94560);
    box-shadow: 0 0 0 1px var(--accent, #e94560) inset;
}

.plan-current {
    display: inline-block;
    font-size: 0.7rem;
    font-style: normal;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(233, 69, 96, 0.18);
    color: #ff9db0;
    vertical-align: middle;
}

/* ---------- Temps d'accès (formules achetables) ---------- */
.access-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 8px;
    color: var(--accent, #e94560);
    font-size: 1.1rem;
}

/* Les trois formules doivent se lire au même niveau : même hauteur de titre
   (le nom le plus long tient sur deux lignes), même ligne pour le prix, même
   ligne pour le bouton. Sans ça, la carte « nom long » décalait son prix et son
   bouton d'une ligne par rapport aux deux autres. */
.access-card {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.access-card > span:nth-child(2) {
    /* Le bloc de texte prend la hauteur restante : le nom le plus long tient
       sur deux lignes, et prix puis bouton restent à la même hauteur sur les
       trois cartes au lieu de descendre d'une ligne sur celle du milieu. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.access-card .access-quota:first-of-type {
    margin-top: 4px;
}

.access-card .plan-price {
    margin-top: 6px;
}

/* Le bouton doit ressembler à un bouton : une barre pleine largeur sur trois
   cartes avait l'air d'une bannière, pas d'un achat. */
.access-card .access-buy {
    margin-top: 8px;
    align-self: center;
    width: auto;
    min-width: 42%;
    padding: 8px 18px;
}

/* Le quota quotidien sous le libellé de la formule : c'est ce que le client
   achète, autant que ce soit lisible avant de cliquer. Gris et non rose : la
   couleur d'accent attire l'œil sur une information secondaire. */
.access-quota {
    display: block;
    margin-top: 3px;
    font-size: 0.72rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.62);
}

/* Détail déplié : discret, pour ne pas concurrencer les offres. */
.plans-detail {
    margin: 10px 0 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
    text-align: left;
}

.plans-detail p { margin: 0 0 6px; }
.plans-detail p:last-child { margin-bottom: 0; }
.plans-detail a { color: rgba(255, 255, 255, 0.72); }

[data-theme="light"] .plans-detail {
    border-color: rgba(28, 35, 64, 0.12);
    color: var(--text-muted);
}

/* Les deux lignes d'explication sous les Offres : meme taille, meme poids.
   Une explication en grand caracteres etait plus longue que les offres. */
#plans-note.plans-note-small {
    margin: 14px 0 6px;
    font-size: 0.76rem;
    line-height: 1.5;
    text-align: center;
    color: rgba(255, 255, 255, 0.62);
}

[data-theme="light"] #plans-note.plans-note-small { color: var(--text-muted); }

/* Rappel dans l'admin : la désignation du médiateur est une obligation du
   professionnel, sans seuil de chiffre d'affaires. */
.legal-warning {
    color: #ffb36b;
    font-weight: 600;
}

/* Mention médiateur du pied de page : discrète, mais lisible. */
.mediator-footnote {
    margin: 2px 0 0;
    font-size: 0.7rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.5);
}

.mediator-footnote a { color: rgba(255, 255, 255, 0.62); }
[data-theme="light"] .mediator-footnote { color: var(--text-muted); }
[data-theme="light"] .mediator-footnote a { color: var(--text-dark); }

/* Avoir : credited par l'administrateur, deduit du prochain achat. Visible
   sans avoir a developper une section, parce que c'est de l'argent en jeu. */
.credit-note,
.checkout-credit {
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 12px;
    background: rgba(255, 193, 7, 0.1);
    color: #ffd479;
    font-size: 0.8rem;
    line-height: 1.45;
}

[data-theme="light"] .credit-note,
[data-theme="light"] .checkout-credit {
    border-color: rgba(180, 130, 0, 0.35);
    color: #8a6100;
}

/* ---------- Messages du compte (cadeaux de l'admin) ---------- */
.notifications-block {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(233, 69, 96, 0.35);
    border-radius: 14px;
    background: rgba(233, 69, 96, 0.08);
}

.notifications-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent, #e94560);
    margin-bottom: 6px;
}

.notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.notifications-list li {
    font-size: 0.8rem;
    line-height: 1.45;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
}

.notifications-list li.unread {
    border-left: 3px solid var(--accent, #e94560);
}

.notifications-list .notif-title { font-weight: 600; display: block; }
.notifications-list .notif-body { color: rgba(255, 255, 255, 0.72); display: block; margin-top: 2px; }
.notifications-list .notif-date {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.72rem;
    margin-top: 3px;
}
.notifications-list .notif-gift {
    display: block;
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #ffd479;
}

[data-theme="light"] .notifications-list li { background: rgba(28, 35, 64, 0.06); }
[data-theme="light"] .notifications-list .notif-body { color: var(--text-dark); }
[data-theme="light"] .notifications-list .notif-date { color: var(--text-muted); }

/* Le résultat d'un envoi de cadeau liste une ligne par destinataire : sans
   pre-wrap, chaque ligne se.concatene en un paragraphe illisible. */
#admin-access-grant-status {
    white-space: pre-wrap;
    line-height: 1.5;
}

.link-button {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent, #e94560);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.admin-formula-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.admin-formula-list .muted {
    opacity: 0.55;
}

.admin-access h3,
#admin-access h3 {
    margin: 22px 0 8px;
    color: var(--accent, #e94560);
    font-size: 1rem;
}

#admin-access h3:first-child {
    margin-top: 0;
}

.checkline {
    display: flex;
    align-items: center;
    gap: 8px;
}

#purchases-modal .account-block {
    margin: 0;
}

/* ---------- « Mes achats » : carte d'accès + historique groupé ---------- */
.purchases-modal {
    max-width: 520px;
    width: calc(100% - 24px);
}

.access-status-card {
    padding: 16px;
    margin-bottom: 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(233, 69, 96, 0.16), rgba(233, 69, 96, 0.04));
    border: 1px solid rgba(233, 69, 96, 0.35);
}

.access-status-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.access-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(233, 69, 96, 0.2);
    color: #ff9db0;
    font-size: 1.2rem;
}

.access-status-text {
    min-width: 0;
}

.access-status-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-light, #e0e0e0);
}

.access-status-sub {
    margin-top: 3px;
    font-size: 0.85rem;
    color: #b9b9c6;
    line-height: 1.45;
}

.access-meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.access-meter-bar {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.access-meter-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #e94560, #ff8fa3);
    transition: width 0.4s ease;
}

.access-meter-label {
    font-size: 0.75rem;
    color: #b9b9c6;
    white-space: nowrap;
}

.access-renew {
    width: 100%;
    margin-top: 14px;
}

.purchases-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 10px;
    font-size: 0.95rem;
    color: #cfcfda;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.purchases-empty {
    margin: 0;
    padding: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #9a9aab;
    text-align: center;
}

.purchase-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.purchase-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #cfcfda;
}

.purchase-item-body {
    flex: 1;
    min-width: 0;
}

.purchase-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.purchase-item-head strong {
    font-size: 0.95rem;
    color: #f2f2f6;
}

.purchase-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
}

.purchase-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.purchase-cancel {
    padding: 5px 11px;
    font-size: 0.78rem;
    white-space: nowrap;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #8f8fa0;
    cursor: pointer;
}

.purchase-cancel:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.purchase-cancel:disabled {
    opacity: 0.5;
    cursor: default;
}

.purchase-details {
    margin-top: 6px;
    font-size: 0.78rem;
    color: #9a9aab;
}

.purchase-details summary {
    cursor: pointer;
    color: #b9b9c6;
}

.purchase-details span {
    display: block;
    margin-top: 4px;
    line-height: 1.45;
}

.purchases-footnote {
    /* Collée en bas du défilement : l'historique peut être long, la mention
       légale doit rester lisible sans avoir à faire défiler jusqu'au bout. */
    position: sticky;
    bottom: -20px;
    margin: 16px -18px -20px;
    padding: 10px 18px 14px;
    font-size: 0.78rem;
    color: #8f8fa0;
    line-height: 1.5;
    background: linear-gradient(to top, var(--secondary-bg) 72%, transparent);
}