/* DIALOG */
dialog::backdrop {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(3px);
    }
    
dialog {
    border: none;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    width: 50%;
    min-width: 250px;
    max-height: 80%;
}
dialog h4{
    font-size: 1.5rem;
    margin-bottom:.3rem;
    margin-top: 2rem;
}
form { display: flex; flex-direction: column; gap: 15px; }
#bpmInput { padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
button#openBtn { padding: 10px 20px; cursor: pointer; }
button[type="submit"] { background: var(--200); color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; }


.beatsNumber{
    position: relative;
}
.beatsNumber::after{
    content: '(' attr(data-txt) ')';
    font-size: .7rem;
    position: absolute;
    top:0;
    color: var(--400);
}


.helpme {
   cursor:help;
}

.point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10 !important;
    cursor: pointer;
    }

.creation-point::before {
    content: '+';
    position: absolute;
    font-size:1rem;
    top:.2rem;
    left:.2rem;
    transform: translate(-50%,-50%);
    color: rgb(149, 53, 151);
    animation:shine .4s forwards;
    animation-iteration-count:4;
}
@keyframes shine {
    50% {transform: translate(-50%,-50%) scale(2.5);}
    100% {display: none;}
}
/* .point:hover:not(.snap,.wood,.kick,.oum)::before {
    content: '+';
    position: absolute;
    display: block;
    font-size:1rem;
    top:.2rem;
    left:.2rem;
    transform: translate(-50%,-50%);
    color: rgb(149, 53, 151);
    animation:shine .3s forwards;
    animation-iteration-count:6;
} */

    
.point.fixed {
    background-color: var(--600);
    box-shadow: 0 0 0 2px var(--100), 0 0 0 3px var(--600);
}
.point.adjusted {
    background-color: var(--400);
    width: 8px;
    height: 8px;
    /* box-shadow: 0 0 0 2px white, 0 0 0 3px #4dabf7; */
}
.pointMenu {
    height: fit-content;
    /* width: fit-content; */
    border-radius: 4px;
    /* background-color: lightblue; */
    position: relative;
    color: var(--800);
    left:12px;
    top:-12px;
    z-index:20;  
    padding:8px 6px;
}
.pointMenu::before {
    content: attr(data-txt);
    position: absolute;
    font-size:.7rem;
    top:0rem;
    color: lightblue;
}
.noshow {
    opacity: 0;
    /* overflow: hidden; */
    transition: all .1s ease-in;
}
.show {
    width: fit-content;
    opacity: 1;
}
.kick {
    /* border-radius:0; */
    background-color: rgb(0, 157, 255) !important;
    width: 14px !important;
    height: 14px !important;
}
.oum {
    /* border-radius:0; */
    background-color: rgb(255, 85, 0) !important;
    width: 14px !important;
    height: 14px !important;
}
.wood {
    border-radius:-20px;
    background-color: rgb(252, 47, 255) !important;
    width: 14px !important;
    height: 14px !important;
}
.snap {
    border-radius:-20px;
    background-color: greenyellow !important;
    width: 14px !important;
    height: 14px !important; 
}
.grp1 {
    border-radius:0;
    background-color: rgb(202, 188, 87) !important;
    width: 10px !important;
    height: 10px !important;
}


#container {
      position: relative;
      width: 75%;
      max-width: 400px;
      aspect-ratio: 1;
      max-height: 400px;
      margin: 0 auto;
      /* background-color: red; */
    }
 

.flash {  
    animation: .4s ease-out flashin;
}  
.flashgroup {
    width:16px;
    height:16px;
    border-radius: 0;
    /* animation: .2s ease-out flashingroup; */
}

@keyframes flashin {
  from { 
        border: 4px solid  rgb(255, 255, 255);
        background-color: rgb(255, 147, 183);
        box-shadow: 0px 0px 0px 4px rgb(232, 232, 232),
                0px 0px 0px 8px rgb(80, 80, 80);
    }
  to   { 
       border: 2px solid  darkgrey;
    background-color: white;
    }
}
@keyframes flashingroup {
  from { 
        border: 8px solid  rgb(167, 102, 102);
        background-color: rgb(255, 147, 183);
        box-shadow: 0px 0px 0px 4px rgb(232, 232, 232),
                0px 0px 0px 8px var(--600);
    }
  to   { 
       border: 8px solid  darkgrey;
        background-color: rgb(241, 43, 43);
    }
}

#map {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    /* background-color: #f9f9f9; */
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
/* #polygone-lignes{
    z-index: 0;
} */

path {
    stroke: rgb(112, 112, 112);
    stroke-width: 2;
    fill: none;
}
.segment {
      stroke-width: 2;
      fill: none;
    }
.debit-anim {
    animation: .3s ease-out flashline;
}
@keyframes flashline {
  from { 
        background-color: rgb(255, 147, 183);
        box-shadow: 0px 0px 0px 2px rgb(232, 232, 232),
                0px 0px 0px 4px rgb(183, 183, 183);
    }
  to   { 
    background-color: white;
    }
}

.input-group {
    position: relative;
    margin-top: 12px;
}
.label-input {
    position: absolute;
    font-size: .65rem;
    width:max-content;
    top:-.6rem;
}
.custom-input {
    font-size: .65rem;
    width:max-content;
    margin-top: 10px;
}

/* .mtrnm-menu {
    
    
} */

.tiroir {
    font-size: 1.6rem;
    display: grid;
    grid-template-columns: 2rem 2rem 1fr;
    padding-left: .5rem;
    align-items:center; 
    background-color: var(--100); 
    color:var(--600);
    width: 3.5rem; 
    height: 5.5rem;
    /* au depart 6rem de haut */
    border-radius: 0 6px 6px 0; 
    position: relative;
    z-index: 1000;
    margin-block:1.4rem;
    position: relative;
}

.tiroir::before {
    content: attr(data-txt);
    position: absolute;
    font-size: .7rem;
    top:-.6rem;
    color: var(--500);
}

.red::after {
    content:'';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
    top:-2px;
    right:-2px;
    z-index: 2000;
}

.expand-right {
    font-size: .8rem;
    cursor: pointer;
    color: var(--400);
    transition: transform 200ms ease-out;
    transform-origin: center center;
    text-align: center;
    z-index: 20;
}
.retourne {
    transform: rotate(180deg);
}
.ajoutTemps, .removeTemps {
    cursor: pointer;
}
.volet {
    background-color: var(--100); 
    font-size: 1.2rem;
    width: fit-content;
    display: grid;
    grid-template-columns: 2rem 1fr 2rem;
    align-items: center;
    position: relative;
    height: 5.5rem;
    /* au depart 6rem de haut */
    padding-left: 1rem;
    translate: -1rem;
    left: -500%;
    z-index: 990;
    border-radius: 0 6px 6px 0; 
    transition: left 200ms ease-in-out;
}
.voletpresets {
    background-color: var(--100); 
    font-size: 1.2rem;
    width: 240px;
    overflow: scroll;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    height: 5.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    translate: -1rem;
    left: -1000%;
    z-index: 990;
    border-radius: 0 6px 6px 0; 
    transition: left 200ms ease-in-out;
    z-index: 1000;
}
.preset {
    position: relative;
    font-size: 1.2rem;
    cursor: pointer;
    top:-.8rem;
    z-index: 1000;
}
.preset:before {
    content: attr(data-denom);
    position: relative;
    top:1.2rem;
    left:.6rem;
}
.preset:after {
    content: '(' attr(data-txt) ')';
    font-size: .7rem;
    position: relative;
    top:-.7rem;
    
}

.etiquette {
    z-index: 20;
    background-color: var(--100);
    text-align: center;
}
.openVolet {
    left: .4rem;
}
.beats {
    display: flex;
    flex-direction: row;
    gap:12px;
}
.temps {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.temps > .incr, .temps > .decr {
    cursor: pointer;
}
.change {
    cursor: pointer;
}






/* le slider du dark mode////////////////////////////// */
/* Conteneur du switch */
/* .switch {
  position: absolute;
  right: 0;
  width: 40px;
  height: 24px;
  z-index: 1000;
  margin:4px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "🌞"; 
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  height: 22px; width: 22px;
  left: 2px; bottom: 1px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
} */
/* input:checked + .slider { background-color: #9b9b9b; }
input:checked + .slider:before {
  transform: translateX(14px);
  content: "🌙";
} */
/* ICIiiiiiiiiiiiiiiii */