* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
.ORTIR-container { padding: 0px !important;}
#tir16-app {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#tir16-intro {
  max-width: 700px;
  text-align: center;
  animation:
    tir16-apparition 1.5s ease;
  padding: 0px;
}
.tir16-intro-image {
width: 90%;
  max-width: 420px;
	 margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(214, 180, 106, .7);
  border-radius: 18px;
  box-shadow:
    0 0 30px rgba(214, 180, 106, .25),
    0 15px 40px rgba(0, 0, 0, .45);
  line-height: 0;
}
.tir16-intro-image img {
  display: block;
  width: 100%;
  height: auto;
}
.tir16-titre {
  margin-top: 15px;
  font-size: 42px;
  font-weight: 300;
  letter-spacing: 2px;
  color: #e6cb69;
}
.tir16-intro-texte {
  margin: 25px auto;
  max-width: 520px;
  line-height: 1.7;
  font-size: 18px;
  color: #ddd;
}
.btntir {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.tir16-cache {
  display: none;
}
#tir16-jeu {
  width: 100%;
  max-width: 1100px;
  animation:
    tir16-apparition 1s ease;
}
#tir16-info {
  width: 100%;
  padding: 0px;
  margin-bottom: 20px;
  background:
    rgba(255, 255, 255, .06);
  backdrop-filter:
    blur(15px);
  border:
    1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  text-align: center;
}
#tir16-message {
  color: #e8d27a;
  font-size: 18px;
}
#tir16-progress {
  margin-top: 15px;
}
.tir16-point {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background: #555;
}
.tir16-point.actif {
  background: #e1c45c;
  box-shadow:
    0 0 12px #e1c45c;
}
#tir16-grille {
  display: grid;
  grid-template-columns:
    repeat(7, 1fr);
  gap: 10px;
  justify-items: center;
}
.tir16-domino {
  width: 100px;
  cursor: pointer;
  perspective: 800px;
  transition:
    transform .45s ease, filter .45s ease;
  animation:
    tir16-domino-arrivee .8s ease backwards;
}
.tir16-domino img {
  width: 100%;
  display: block;
  filter:
    drop-shadow(0 15px 20px rgba(0, 0, 0, .7));
}
.tir16-domino:hover {
  transform:
    translateY(-18px) rotate(-4deg) scale(1.12);
  filter:
    drop-shadow(0 25px 30px rgba(215, 184, 75, .4));
}
#tir16-selection {
  padding: 0 20px 0 20px;
  text-align: center;
}
#tir16-selection h2 {
  color: #e6cb69;
  font-weight: 200;
	  font-size: 20px;
	padding: 0px;
	margin-bottom: 0px;
}
#tir16-dominos-tires {
  display: flex;
  justify-content: center;
  gap: 50px;
}
.tir16-emplacement {
  width: 180px;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #777;
  font-size: 30px;
}
#tir16-resultats {
  margin-top: 0px;
}
#tir16-resultats h2 {
  text-align: center;
  color: #e6cb69; 
font-size: 1.5em;
}
.tir16-definition {
  background:
    rgba(255, 255, 255, .07);
  border:
    1px solid rgba(255, 255, 255, .12);
  backdrop-filter:
    blur(12px);
  border-radius: 20px;
  padding: 16px 20px;
  margin-bottom: 12px;
  line-height: 1.7;
  opacity: 0;
}
@keyframes tir16-apparition {
  from {
    opacity: 0;
    transform:
      translateY(30px);
  }
  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}
@keyframes tir16-domino-arrivee {
  from {
    opacity: 0;
    transform:
      translateY(50px) rotate(10deg);
  }
  to {
    opacity: 1;
    transform:
      translateY(0) rotate(0);
  }
}
@media(max-width:900px) {
  #tir16-grille {
    grid-template-columns:
      repeat(4, 1fr);
    gap: 15px;
  }
  .tir16-domino {
    width: 95px;
  }
}
@media(max-width:600px) {
  #tir16-app {
    padding: 15px;
  }
  .tir16-titre {
    font-size: 30px;
  }
  #tir16-grille {
    grid-template-columns:
      repeat(3, 1fr);
  }
  #tir16-dominos-tires {
    gap: 15px;
  }
  .tir16-emplacement {
    width: 100px;
    height: 75px;
  }
}
#tir16-grille {
  background:
    radial-gradient(circle, rgba(215, 184, 75, .15), transparent 60%);
  padding: 20px;
  border-radius: 40px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, .7);
}
.tir16-domino:active {
  transform:
    scale(.92) rotate(-5deg);
}
.tir16-selectionne {
  animation:
    tir16-choix .8s ease forwards;
}
@keyframes tir16-choix {
  0% {
    transform:
      scale(1) rotate(0);
    opacity: 1;
  }
  50% {
    transform:
      scale(1.3) rotate(8deg);
  }
  100% {
    transform:
      translateY(-200px) scale(.8);
    opacity: 0;
  }
}
.tir16-domino-tire {
  animation:
    tir16-flip 1s ease;
  transform-style:
    preserve-3d;
}
@keyframes tir16-flip {
  from {
    transform:
      rotateY(180deg) scale(.7);
    opacity: 0;
  }
  to {
    transform:
      rotateY(0) scale(1);
    opacity: 1;
  }
}
.tir16-definition {
  position: relative;
  overflow: hidden;
}
.tir16-definition::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background:
    linear-gradient(90deg, #d8bd54, transparent);
}
.tir16-sortie {
  animation:
    tir16-sortie 1s forwards;
}
@keyframes tir16-sortie {
  to {
    opacity: 0;
    transform:
      scale(.8) translateY(-40px);
  }
}
#tir16-message-final {
  margin-top: 30px;
  padding: 22px;
  text-align: center;
  background:
    rgba(255, 255, 255, .07);
  border:
    1px solid rgba(255, 255, 255, .12);
  border-radius: 25px;
  opacity: 0;
}
#tir16-message-final h2 {
  color: #e6cb69;
  font-weight: 300;
}
#tir16-synthese {
  color: #ddd;
  font-size: 18px;
  line-height: 1.8;
  padding: 0px;
}
.tir16-definition h4 {
 margin: 0px;
  color: #e6cb69;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tir16-definition h3 {
	    margin-bottom: 0px;
}
.tir16-choisi {
  visibility: hidden;
  pointer-events: none;
}
.tir16-visible {
  display: block !important;
  animation:
    tir16-apparition 1s ease forwards;
}
.tir16-mode-plein-ecran {
  padding: 15px !important;
}
.tir16-mode-plein-ecran .tir16-intro-texte {
  font-size: 15px;
  margin: 10px auto;
}
.tir16-mode-plein-ecran #tir16-info {
  padding: 8px 15px;
  margin-bottom: 10px;
}
.tir16-mode-plein-ecran #tir16-message {
  font-size: 14px;
}
.tir16-mode-plein-ecran #tir16-etape {
  display: none;
}
.tir16-mode-plein-ecran #tir16-progress {
  display: none;
}
.tir16-mode-plein-ecran #tir16-grille {
  padding: 15px;
  gap: 10px;
}
.tir16-mode-plein-ecran .tir16-domino {
  width: 75px;
}
.tir16-mode-plein-ecran #tir16-selection {
  margin-top: 15px;
}
.tir16-mode-plein-ecran #tir16-selection h2 {
  font-size: 22px;
  margin-bottom: 10px;
}
.tir16-mode-plein-ecran .tir16-emplacement {
  width: 120px;
  height: 80px;
}
.tir16-mode-plein-ecran #tir16-resultats {
  margin-top: 20px;
}
.tir16-mode-plein-ecran #tir16-resultats h2 {
  font-size: 22px;
  margin-bottom: 15px;
}
.tir16-mode-plein-ecran .tir16-definition {
  padding: 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.4;
}
.tir16-mode-plein-ecran #tir16-message-final {
  margin-top: 20px;
  padding: 15px;
}
.tir16-mode-plein-ecran #tir16-message-final h2 {
  font-size: 22px;
  margin-bottom: 10px;
}
.tir16-mode-plein-ecran #tir16-synthese {
  font-size: 15px;
  line-height: 1.5;
}
#tir16-app {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}
@media(max-width:600px) {
  #tir16-grille {
    grid-template-columns: repeat(3, 1fr);
    padding: 15px;
    gap: 10px;
    width: 100%;
    max-width: 100%;
  }
  .tir16-domino {
    width: 75px;
    max-width: 100%;
  }
  .tir16-domino img {
    width: 100%;
    height: auto;
  }
}
@media(max-width:360px) {
  #tir16-grille {
    grid-template-columns: repeat(3, 1fr);
    padding: 0px;
    gap: 5px;
  }
  .tir16-domino {
    width: 65px;
  }
}
@media(max-width:600px) {
  #tir16-dominos-tires {
    gap: 25px;
    padding: 0px;
    margin: 0px;
  }
  .tir16-emplacement {
    width: 60px;
    height: 55px;
    padding: 0px;
    margin: 0px;
  }
  #tir16-dominos-tires .tir16-emplacement img {
    width: 80px !important;
    height: auto;
  }
  #tir16-synthese {
    font-size: 14px;
    line-height: 1.4;
  }
  #tir16-resultats {
    margin-top: 20px;
  }
  #tir16-message-final {
    margin-top: 15px;
    padding: 15px;
  }
  .tir16-intro-texte {
    font-size: 14px;
    line-height: 1.5;
    margin: 15px auto;
  }
}
#tir16-app {
  overflow: hidden;
}
.tir16-definition p,
#tir16-synthese p {
    margin: 0 0 8px;
    font-weight: 400;
    line-height: 1.6;
}

.tir16-definition p:last-child,
#tir16-synthese p:last-child, #tir16-synthese, #tir16-synthese h2 {
    margin-bottom: 0;
}




@media(max-width:600px) {
#tir16-btn-start, #tir16-selection, #tir16-message-final{
    margin-bottom: 80px !important;
}
	}