/* === Palette de couleurs === */
:root {
    --bg-color: #0d2b2e;
    --accent-color: #f4a261;
    --highlight-color: #2a9d8f;
    --neutral-color: #e9c46a;
    --text-color: #ffffff;
    --sheet-bg: #000000;
    --note-color: #1a1a1a;
    --button-bg: #1d3d40;
    --button-hover: #264e52;
}

body{
    width: 600px;
    margin: 0 auto;
    padding: 0;
}

/* === BANDEAU TITRE === */
#header-banner {
    background-color: #ffffff;
    color: #000000;
    padding: 8px 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
    height: auto;
    box-sizing: border-box;
    border-radius: 16px;
}

#banner-title {
    margin: 0 0 2px 0;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: block;
}

#banner-title a {
    color: #000000 !important;
    text-decoration: none;
}

#banner-title:hover {
    color: #666;
    transform: scale(1.02);
}

#author-info {
    font-size: 0.85em;
    margin-top: 2px;
}

#author-info a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

#author-info a:hover {
    color: #000;
    text-decoration: underline;
}

#meter {
    margin-top: 523px;
    position: relative;
}

line {
    stroke: black;
}

line.distanceGrid {
    stroke: #EEE;
}

circle.harmony {
    stroke: none;
    stroke-width: 1;
    fill: transparent;
    opacity: 0.25;
}

circle.dot {
    fill: black;
    stroke: white;
}

polygon {
    stroke: white;
    stroke-width: 1;
}

#toniq text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: rgb(0, 0, 0);
    stroke: black;
}

#third text {
    font-family: Arial, Helvetica, sans-serif;
    font-size: xx-small;
    text-anchor: middle;
    dominant-baseline: middle;
    fill: white;
    stroke: var(--bg-color);
}

#visu {
    margin-left: 100px;
    margin-bottom: 10px;
    width: 300px;
}

.highlight rect {
    stroke-width: 1;
    stroke: black;
}

.reset rect {
    stroke: none;
}

#notation {
    margin-left: 25px;
}

#transport {
    padding-top: 10px;
    padding-left: 129px;
}

#meter {
    overflow: hidden;
    margin-left: 25px;
}

#tonality,
#slider {
    /* margin-left: 50px;*/
}

#slider {
    margin-left: 31px;
}

#footer {
    width: 500px;
}

#footer a {
    float: right;
    margin-top: 10px;
    font-size: smaller;
    text-align: center;
    color: var(--sheet-bg);
}

.tonality-label {
    opacity: 0.2;
}

#app-footer {
    margin-top: 20px;
    padding: 8px 20px;
    font-size: 12px;
    color: #666;
    border-top: 1px solid #ddd;
}

#app-footer .footer-content {
    max-width: 1000px;
}

#app-footer a {
    color: #2a9d8f;
    text-decoration: none;
}

#app-footer a:hover {
    text-decoration: underline;
}

#tonality-fingerprint {
    width: 100px;
    margin-top: 10px;
}

.track-info {
    margin: 5px 15px;
    font-size: 14px;
    opacity: 0.85;
}

.track-navigation {
    margin: 5px 15px;
    text-decoration: none;
    font-size: 14px;
}

.track-navigation a {
    text-decoration: none;
    font-weight: bold;
    color: #333; /* Couleur gris foncé au lieu du bleu */
}

.track-navigation a:hover {
    color: #2a9d8f; /* Couleur d'accent au survol */
    text-decoration: underline;
}

.track-navigation a:visited {
    color: #333; /* Même couleur pour les liens visités */
}

/* ============================= */
/* SEGMENTS STRUCTURELS (BOXES)  */
/* ============================= */
/* Segments uniques */
.segment-unique {
    fill: #e0e0e0;
}

/* ============================= */
/* MODE MONOCHROME               */
/* ============================= */

body.monochrome .tonality-fill {
    fill: #000 !important;
}

body.monochrome .tonality-stroke {
    stroke: #000 !important;
}

body.monochrome polygon {
    stroke: #000;
}

body.monochrome .tonality-label {
    fill: #000;
}

/* ============================= */
/* MODE MONOCHROME – LETTRES     */
/* ============================= */

body.monochrome .tonality-label {
    fill: #000 !important;
    stroke: none !important;
    opacity: 0.25;
    /* valeur par défaut, animée ensuite */
}

/* Tonalité active : reste lisible */
body.monochrome .tonality-label[style*="opacity: 1"] {
    opacity: 1;
}


/* ============================= */
/* CENTRAGE DES INFOS & CONTROLES */
/* ============================= */

.centered-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
}

/* Infos morceau */
.track-info {
    margin: 5px 0;
}

/* Navigation précédent / suivant */
.track-navigation {
    margin: 2px 0 5px 0;
}

/* Player audio centré */
#audio-controls audio {
    margin: 5px 0;
}

/* Bouton monochrome */
.centered-button {
    display: block;
    margin: 5px auto 0 auto;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

/* ============================= */
/* BOUTON MONOCHROME – CENTRAGE  */
/* ============================= */

.controls-bottom {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

#toggle-monochrome {
    display: block;
    margin: 12px auto;
}

/* ============================= */
/* LAYOUT PAGE VERTICAL 600px    */
/* ============================= */

body {
  display: flex;
  justify-content: center;
  background: #fafafa; /* optionnel */
  flex-direction: column;
  margin: 0 auto;
}

.selector-upload-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

#pair-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 0.95rem;
}

#pair-selector select {
  min-width: 220px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
  background-color: #fff;
}

#pair-selector button {
  padding: 6px 14px;
  background-color: #111;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
}

#pair-selector button:hover {
  background-color: #000;
}

#uploadForm {
  display: flex;
  align-items: center;
  gap: 8px;
}

#uploadForm .btn-upload {
  background: #ccc;
  color: #333;
  border: 1px solid #999;
  padding: 6px 12px;
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#uploadForm .btn-upload:hover {
  background: #bbb;
}

#uploadForm .file-info {
  margin: 0;
  font-style: italic;
  font-size: 0.9em;
}

#page-container {
  width: 600px;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* SVG et timeline prennent toute la largeur */
#timeline svg,
#visu svg {
  width: 100%;
}

/* Harmoniser les marges verticales */
#timeline {
  margin: 5px 0 10px 0;
}

#visu {
  margin: 0 auto;
}

/* Footer centré */
#app-footer {
  text-align: center;
}

/* monochrome upload button */
#uploadForm input[type="file"] {
  font-size: 0.9em;
}

#btnLabel {
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.9em;
  background: #ddd;
  color: #333;
  border: 1px solid #aaa;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}

#btnLabel:hover {
  background: #ccc;
  cursor: pointer;
}

#btnAction {
  padding: 6px 12px;
  font-size: 0.9em;
  background: #ddd;
  color: #333;
  border: 1px solid #aaa;
  border-radius: 3px;
  cursor: default;
}

#btnAction.enabled {
  background: #bbb;
  cursor: pointer;
}

#btnAction.enabled:hover {
  background: #999;
}