/***** Thème clair violet & doré antique (poulpe) *****/
/* Fond général */
body {
    min-height: 100vh;
    background: #ede8ff;
    color: #2c2440;
    font-size: 1.05em;
    font-family: 'Segoe UI', 'Roboto', sans-serif;
}

/* Cartes/boîtes principales */
.main-card {
    background: #e5dbf7;
    color: #2c2440;
    border-radius: 1.5em;
    margin-bottom: 2em;
    box-shadow: 0 8px 28px #a390cb36;
    animation: fadein 1s;
}

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

/* Navbar */
.navbar {
    background: linear-gradient(90deg,#bc9eea 85%,#c6a05a 100%);
}
.navbar .navbar-brand, .navbar .nav-link {
    color: #332d46 !important;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 0.03em;
}
.navbar .nav-link.active,
.navbar .nav-link:hover {
    color: #c6a05a !important;
    background: #f5ebd8ee;
    text-shadow: none;
    border-radius: 8px;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px; background: #e5dbf7;
}
::-webkit-scrollbar-thumb {
    background: #9874be;
    border-radius: 10px;
}

/* Boutons principaux (violet->doré) */
.btn-theme,
.btn-theme:visited,
.btn-theme:active {
    background: linear-gradient(90deg,#9874be 65%,#c6a05a 100%);
    color: #fff !important;
    font-weight: 700;
    font-size: 1.1em; 
    padding: 0.45em 1.2em;
    border-radius: 2em;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px #b79c3860;
    border: none;
    transition: background .17s, transform .15s, box-shadow .15s;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none!important;
}
.btn-theme:hover, .btn-theme:focus {
    background: linear-gradient(90deg,#6d5398 60%,#b79c38 100%);
    color: #fff !important;
    text-decoration: none!important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 18px #b79c3848;
}

/* Bouton suppression doré-rouge */
.btn-theme.btn-danger,
.btn-theme.btn-danger:visited,
.btn-theme.btn-danger:active {
    background: linear-gradient(90deg,#e57272 60%,#c6a05a 100%);
    color: #fff !important;
}
.btn-theme.btn-danger:hover,
.btn-theme.btn-danger:focus {
    background: linear-gradient(90deg,#a33b1e 60%,#85702b 100%);
    color: #fff !important;
}

/* Style liens "boutons" */
a.link-theme, .link-theme:visited {
    color: #9874be;
  font-weight: 500;
    text-decoration: none;
    transition: color .15s;
    font-size: 1.08em;
}
a.link-theme:hover, .link-theme:focus {
    color: #c6a05a;
    text-decoration: underline wavy;
}
a, .link-theme { color: #9874be; }
a:hover, .link-theme:hover { color: #c6a05a; text-decoration: underline; }

.form-label {
    font-size: 1.07em;
    font-weight: 600;
    color: #c6a05a;
}

.input-group-text, .form-control, .form-select {
    font-size: 1.05em;
    background: #fffde8;
    color: #2c2440;
    border: 1px solid #d4cbc1;
}
input, .form-control, .form-select {
    background: #fffde8;
    color: #2c2440;
}

/* Alertes */
.alert-success {
    background: linear-gradient(90deg,#bc9eea 40%,#c6a05a 100%);
    color: #3d2c18;
    font-weight: bold;
    box-shadow: 0 2px 8px #b79c3840;
    border-radius:0.6em;
}
.alert-danger {
    background: linear-gradient(90deg,#e57272 20%,#c6a05a 100%);
    color: #3d2c18;
    font-weight:bold;
    border-radius:0.6em;
}

.list-group-item:hover {
    background: linear-gradient(90deg, #efe7fc 40%, #ede2fd 100%);
    transition: background .2s;
    color: #c6a05a;
}

/* Player UI */
#player-ui {
    background: linear-gradient(110deg,#efe7fc 75%, #c6a05a22 100%);
    border: 2px solid #9874be;
    border-radius:1.3em;
    box-shadow: 0 6px 16px #a390cb30;
    min-height:170px;
    padding:1.1em 1.2em;
    color: #2c2440;
}
#player-ui button {
    box-shadow: 0 2px 8px #9874be20;
    font-size: 1.2em;
    min-width: 2.2em;
}
#player-ui .form-select,
#player-ui label { font-size: 1.1em; color: #c6a05a; }
#progress-bar {
    background: linear-gradient(90deg,#9874be,#c6a05a 90%);
    border-radius: 5px;
    height: 0.7em;
    box-shadow: 0 1px 8px #9874be40;
}

/* Badge, sliders et autres accents */
.badge-stem {
    background: #9874be;
    color: #fff;
    font-size: 0.95em;
    margin-right:4px;
    border-radius: 0.5em;
    padding: 0.22em 0.8em;
    font-weight: bold;
}
.form-check-input:checked { background-color: #c6a05a; border-color: #9874be;}
.form-range::-webkit-slider-thumb { background: #c6a05a; }
.form-range::-moz-range-thumb { background: #c6a05a; }

.fs-5, .fs-6 { font-size: 1.2em !important; }
h1, h2, h4, h5 {
    color: #9874be;
    font-weight: 800;
    letter-spacing: 0.05em;
}
h1, h4, h5 { font-weight: 800; }
h2 { font-size: 1.5em; }

/* Boutons CRUD list: plus grands, icône à gauche */
.btn-icon {
    padding: 0.34em 1em;
    font-size: 1.1em; 
    border-radius: 1.5em;
    background: #efe7fc;
    color: #9874be;
    border: 1px solid #a390cb;
    transition: background .17s, color .16s;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}
.btn-icon:hover, .btn-icon:focus {
    background: #9874be;
    color: #fff;
}

.btn-icon.btn-danger { color: #e57272; background:#f3ebed; border-color: #e57272;}
.btn-icon.btn-danger:hover { color: #fff; background:#9874be; }

/* Mobile/Responsive => polices plus grandes, paddings aussi */
@media (max-width: 900px) {
    body, .form-label,
    .input-group-text, .form-control, .form-select,
    .main-card, .navbar, h1, h4, h5 {
    font-size: 1em;
    }
  .main-card { padding: 0.8em 0.2em; }
    .navbar .navbar-brand, .navbar .nav-link { font-size: 1em; }
    #player-ui { padding:0.5em 0.2em; font-size:1em;}
    .btn-theme, .btn-icon { font-size:1em;}
    h1, h4 { font-size: 1.1em; }
}

#timecode {
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
    color: #c6a05a;
}