/* reset */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body:not(.main-nav) {
  font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
  background: linear-gradient(135deg, var(--bg-dark) 0%, #071016 100%);
  color: var(--text-white);
	padding-bottom: 5px;
  overflow-x: hidden;
  line-height:1.45;
  -webkit-tap-highlight-color: transparent;
}

/* central container */
.container{
  max-width: calc(100% - 50px);
  margin: 0 auto;
}

/* heading */
h1{
  text-align:center;
  font-size:2.4em;
  margin-bottom:8px;
  color: var(--text-white);
  letter-spacing: -0.02em;
  text-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

.card h3 {
  font-size: 1.1em;
}

/* tab nav */
.tab-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:26px;
  margin-bottom:26px;
  flex-wrap:wrap;
}

.tab-btn{
  padding:10px 18px;
  background: transparent;
  border: 1px solid var(--glass);
  color: var(--text-muted);
  cursor: pointer;
  border-radius:10px;
  font-size:0.98em;
  transition: all 220ms cubic-bezier(.2,.9,.32,1);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(2,6,23,0.45);
}

.tab-btn:hover{
  transform: translateY(0px);
}

.tab-btn.active{
  background: var(--glass);
  border: 1px solid var(--accent-blue);
  color: var(--accent-blue);
}

/* tabs content */
.tab-content{
  display:none;
  animation: fadeIn 420ms ease both;
}

.tab-content.active{
  display:block;
}

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

/* grids */
.grid{
  display:grid;
  gap:20px;
  margin-bottom:20px;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 {
  grid-template-areas:
		"a b d"
		"a c c";
}
.grid-4 {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-areas:
        "a d"
        "b d"
        "c d";
    gap: 20px;
}
.grid-5 {
  grid-template-areas: "a";
  height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-6 {
	grid-template-areas:
		"a b c"
		"e d d";
}
.grid-7 {
	grid-template-areas:
		"a b c"
		"a b d";
}

.card-circle {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* lists */
.card-fund .scale-formula li {
  font-size: 1em;
}

.interval-list, .chord-formula, .scale-formula, .tips-list{
  list-style:none;
  padding:10px 0;
}

.interval-list, .scale-formula, .tips-list {
  margin-top: 0;
  padding-top: 0;
}

.interval-list li, .chord-formula li, .scale-formula li, .tips-list li {
  padding:10px;
  margin:8px 0;
  background: rgba(255,255,255,0.02);
  border-radius:8px;
  border-left: 4px solid var(--cool-blue);
  color: var(--text-white);
  font-size:0.96em;
	cursor: default;
}

.interval-list li:hover span, .scale-formula li:hover, .tips-list li:hover {
	color: var(--accent-blue);
	border-color: var(--cool-blue);
	cursor: pointer;
}

.interval-list li {
  display: grid;
  grid-template-columns: 1fr 0.5fr 1fr;
  gap: 12px;
  position: relative;
}

.tips-list li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
}

/* Le conteneur parent devient une grille à 2 colonnes */
.interval-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 10px 20px; /* Espace vertical de 10px, horizontal de 20px */
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

/* On s'assure que chaque item occupe bien sa ligne */
.interval-grid-container li {
    margin: 0; /* On gère l'espacement via le gap du parent */
    display: grid;
    grid-template-columns: 1fr 0.5fr 1fr;
    gap: 12px;
    position: relative;
    align-items: center;
    min-height: 80px; /* Optionnel : force une hauteur minimale identique pour tous */
}

.interval-grid-container-2 li {
    margin: 0; /* On gère l'espacement via le gap du parent */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
    align-items: center;
    min-height: 80px; /* Optionnel : force une hauteur minimale identique pour tous */
}


.interval-list li > span:first-child {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 0.75em;
  font-weight: 800;
  color: var(--accent-blue); /* Optionnel : pour le faire ressortir */
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

.scale-formula-enharmonic {
  list-style:none;
  display: flex;
  flex-direction: row;
  gap: 3px;
  justify-content: space-around;
}

.interval-grid-container li {
  position: relative;
}

.interval-list-2, .chord-formula, .scale-formula {
  list-style:none;
  padding:10px 0;
}

.interval-list-2 li, .chord-formula li, .scale-formula li, .scale-formula-enharmonic li{
  padding:10px;
  margin:8px 0;
  background: rgba(255,255,255,0.02);
  border-radius:8px;
  border-left: 4px solid var(--cool-blue);
  color: var(--text-white);
  font-size:0.96em;
	cursor: default;
}

.interval-list-2 li:hover span, .scale-formula li:hover, .scale-formula-enharmonic li:hover {
	color: var(--accent-blue);
	border-color: var(--cool-blue);
	cursor: pointer;
}

.interval-name {
  font-weight: bold;
  text-align: right;
}

/* progression / small UI chips */
.progression-box{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0;
}

.blues {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 10px 0;
}

.blues > .chord-box {
  background-color: rgb(0, 0, 255, 0.1);
}

.chord-box{
  background: rgba(255,255,255,0.03);
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  font-size:1.05em;
  color: var(--text-white);
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* note circle: modern neon rim */
.note-circle {
  display:inline-flex;
  width:44px;
  height:44px;
  border-radius:50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.04);
  align-items:center;
  justify-content:center;
  margin:6px;
  font-weight:700;
  color: var(--text-white);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
	cursor: pointer;
}

.note-circle:hover{
	color: var(--accent-blue);
	border-color: var(--cool-blue);
	background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));
}

.notes-circles {
  font-size: 2em;
  text-align: center;
  margin: 2px 0;
  cursor: default;
}

.shells-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 10px;
}

.shell {
  display: grid;
  grid-template-areas:
    "a"
    "b";
}

.shells {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
}

/* shell voicing cards */
.shell-voicing {
  background: var(--bg-dark);
  padding:10px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.03);
  max-height: 200px;
  max-width: 200px;
  position: relative;
}

.shell-voicing h4 {
  font-size: 0.9em;
  margin: 0;
}

/* smaller UI tweaks */
.card p{ color: var(--text-muted); font-size:0.96em; }
.card strong{ color: var(--text-white); }

/* responsive tweaks */
@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-7 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d";
  }
  .grid-6 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e";
  }
  .interval-grid-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width:600px){
  h1{ font-size:1.6em; }
  .tab-btn{ padding:8px 12px; font-size:0.9em; }
  .note-circle{ width:36px; height:36px; }
  .shells { grid-template-columns: 1fr; }
  .blues { grid-template-columns: repeat(2, 1fr); }

  .grid-6, .grid-7 {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e";
  }

  .chords-li-example {
    flex-direction: column !important;
    text-align: center;
  }

  .chords-li-example custom-keyboard {
    width: 100% !important;
    max-width: 300px;
  }
} /* Close the @media (max-width: 600px) block properly */

line {
	stroke: rgba(255, 255, 255, 0.03);
	stroke-width: 2;
}

.chords-li-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}