/* PLEIN ECRAN */

#outil.plein-ecran {
  position: fixed;
  z-index:100;
  width: 100vw;
  height: 100vh;
  top:0;
  left:0;
}

/* POUPUP */


#outil .popup {
  background: rgba(0,0,0,0.4);
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  z-index:9999;
}

#outil .popup>div{
  background: var(--white);
  padding: 1em;
  border-radius: var(--border-radius);
}

/* TITRE */

#outil .titre {
  font-size: inherit;
}

/* TEXTE */

#outil .texte {
  text-align: center;
}
/* INPUT NOMBRE */


  
#outil .input-nombre::-webkit-outer-spin-button,
#outil .input-nombre::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#outil .input-nombre,
#outil .input-texte {
  -moz-appearance: textfield;
  text-align: center;
  border: none;
  border-radius: var(--border-radius);
  background:var(--light-gray);
}

#outil .input-nombre:focus,
#outil .input-texte:focus {
    background:var(--white);

}

/* TOURNER */

#outil .tourner180 {
  
  rotate: 180deg;
}

/* LETTRE SCRABBLE */

#outil .lettre-scrabble{
  border:1px solid var(--black);
    padding: .5em 1em ;
  width:3em;
  height:3em;
  margin:0;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-5);
  translate: var(--translate-5);
  font-size: x-large;
}

#outil .lettre-scrabble .texte:last-of-type{
 position: absolute;
  bottom: .1em;
  right: .1em;
  font-size: medium;
}
/* CONTENEUR */

#outil .conteneur{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap:.5em;
}

#outil .flex-horizontal{
  flex-direction: row;
}
#outil .flex-vertical{
  flex-direction: column;
}

/* COMPTEUR */

#outil .conteneur.compteurs{
  flex-grow: 1;
  
}


#outil .compteur .input-texte {
  width: 100%;
}


#outil .conteneur-nombre {
  position: relative;
}
#outil .compteur .texte {
  position: absolute;
  top:-.8em;
  padding: 0 1em;
  border-radius: var(--border-radius);
  background: var(--black);
  color: var(--white);
  font-size:medium;
}

#outil .compteur .ligne-compteur {
  font-size:x-large;
}

#outil .compteur .ligne-actions{
  font-size:x-small;
}
#outil .compteur .ligne-compteur .input-nombre{
  font-size:xxx-large;
      background:var(--white);
  width: 100%;

}
#outil .compteur{
  flex-grow: 1;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: var(--gray);
  color: var(--black);
  border-radius: var(--border-radius);
  
  padding: .5em;
  width: 100%;
}
/* CONTENEUR */

#outil .conteneur.des{
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap:wrap;
  margin: 1em 0;
}

/* AIGUILLE */

#outil .aiguille {
  
}

#outil .aiguille img {
    transition: all 5s ease-out;

}

/* BOUTON */

#outil .bouton.gros-bouton {
  font-size: x-large;
}
#outil .bouton {
  background:var(--light-gray);
  border:none;
  padding: .5em 1em ;
  margin:5px;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-5);
  translate: var(--translate-5);
}

#outil .bouton * {
  pointer-events: none;
}

#outil .bouton:hover{
  box-shadow: var(--shadow-4);
  translate: var(--translate-4);
}

#outil .bouton:active{
  box-shadow: var(--shadow-0);
  translate: var(--translate-0);
}


#outil .bouton:disabled {
  background:var(--gray);
  color:var(--dark-gray);
  box-shadow: var(--shadow-0);
  translate: var(--translate-0);

}

/* BUZZER */

#outil .bouton.buzzer {
  position: relative;
  width: 300px;
  max-width: 100%;
  min-height: 300px;
  border-radius:100%;
  
}
#outil .bouton.buzzer.premier {
  background:var(--white);
  box-shadow: inset 0 0 20px 10px var(--light-gray);
  color:var(--black);
}

/* DE */

#outil .de .resultat {
  font-size:calc(var(--size) / 2);
  height:var(--size);
  width:var(--size);
  text-align:center;
  line-height:var(--size);
}

#outil .de{
  --size:120px;
  height:var(--size);
  position:relative;
  margin:calc(var(--size) / 8);
  width:var(--size);
  top:calc(var(--size) / 2);
  left:calc(var(--size) / 2);

  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
#outil .de .cube{
  height:var(--size);
  widht:var(--size);
  -webkit-transform-origin:50% 50%;
          transform-origin:50% 50%;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
}
#outil .de.animer .cube{
  -webkit-animation:rotate-dice 2s 1 ease-in-out;
          animation:rotate-dice 2s 1 ease-in-out;
}
#outil .de .face{
  border:1px solid #2d3d4b;
  border-radius:5px;
  background:#bec2c5;
  position:absolute;
  display:block;
  height:var(--size);
  width:var(--size);
}

#outil .de .face1{transform:translateZ(calc(var(--size) / 2));}
#outil .de .face2{transform:rotateY(90deg) translateZ(calc(var(--size) / 2));}
#outil .de .face3{transform:rotateY(180deg) translateZ(calc(var(--size) / 2));}
#outil .de .face4{transform:rotateY(-90deg) translateZ(calc(var(--size) / 2));}
#outil .de .face5{transform:rotateX(90deg) translateZ(calc(var(--size) / 2));}
#outil .de .face6{transform:rotateX(-90deg) translateZ(calc(var(--size) / 2));}

@keyframes rotate-dice{
  0%{transform:rotateX(0deg) rotateY(0deg);}
  22% {color:inherit;}
  23% {color:rgba(0,0,0,0);}
  74% {color:rgba(0,0,0,0);}
  75% {color:inherit;}
  97%,100%{transform:rotateX(-360deg) rotateY(720deg);}
}

/* HORLOGE */

#outil button:has(time){
 flex-grow: 1;
  min-width: 100%;
}

#outil button time {
 background: none;  
  border: none;
}

#outil time {
    display: inline-block;

  font-size:xxx-large;
  border-radius: var(--border-radius);
  padding: .2em .7em;
  border:1px solid var(--light-gray);
  background-image: linear-gradient(90deg, var(--light-gray) var(--ecoulement), var(--white) var(--ecoulement));
}

#outil time.horloge.alerte {
  background:var(--white);
  box-shadow: inset 0 0 20px 10px var(--light-gray);
  color:var(--black);
}

#outil time .sep {
  color:var(--dark-gray);
  font-weight: normal;
  margin: .1em;
}

#outil time .centiemes {
  font-size: large;
}

#outil .plateau-bf {
  --s: 60px;  /* size  */
  --m: 2px;    /* margin */
  --p: 8px;    /* board padding */
  --f: calc(1.732 * var(--s) + 4 * var(--m)  - 1px);
}

@media (max-width: 600px) {
  #outil .plateau-bf {
  --s: 40px;  /* size  */
  }
}
  @media (max-width: 350px) {
  #outil .plateau-bf {
  --s: 30px;  /* size  */
  }
}
#outil .plateau-bf {

  font-size: 0; /*disable white space between inline block element */
  background:var(--black);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: calc(var(--s) * 0.3);
  min-width:calc(var(--s) * 8);
  min-height:calc(var(--s) * 8);
  border-radius:100%;
  
  rotate: 30deg;
}
#outil .plateau-bf .ligne {
    display:flex;
  flex-direction:row;
  align-items:center

}
#outil .plateau-bf .case {
  width: var(--s);
  margin: var(--m);
  height: calc(var(--s)*1.1547); 
  display: inline-block;
  clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
  background: var(--gray);
  margin-bottom: calc(var(--m) - var(--s)*0.2885);
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  top:calc(var(--s) * -0.125);
}

#outil .plateau-bf .pion {
  width: calc(var(--s) *.7);
  height: calc(var(--s) *.7);
  border-radius:var(--s);
  border:4px solid var(--black);
  pointer-events: none;
}

#outil .plateau-bf #pion1 {
  background:var(--dark-gray);
}
#outil .plateau-bf #pion2 {
  background:var(--white);
}



#outil .plateau-bf .case.selectionnee {
  background:var(--light-gray);
}
#outil .plateau-bf .case:hover {
  background:var(--light-gray);
}