#tir21Scene {
    position: relative;
    width: 100%;
    min-height: 850px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#tir21ZonePendule {
    position: absolute;
    width: min(90vw, 600px);
    height: min(90vw, 600px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(45deg);
    transform-style: preserve-3d;
}

#tir21Trace,
#tir21Fil,
#tir21Pointe {
    position: absolute;
    left: 0;
    top: 0;
}

#tir21Trace {
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

#tir21Accroche {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffef2 0%, #ffe890 25%, #d4ab34 60%, #7d5a09 100%);
    border: 2px solid #f7d86a;
    box-shadow:
        inset 2px 2px 4px rgba(255,255,255,.45),
        inset -3px -4px 6px rgba(0,0,0,.45),
        0 0 12px rgba(255,225,120,.45);
    z-index: 20;
}

#tir21Fil {
    left: 50%;
    top: 0;
    width: 3px;
    transform-origin: top center;
    border-radius: 4px;
    background: repeating-linear-gradient(
        to bottom,
        #fff8d5 0px,
        #f6d867 3px,
        #c99718 6px,
        #ffe99d 9px
    );
    box-shadow:
        inset 1px 0 rgba(255,255,255,.55),
        inset -1px 0 rgba(0,0,0,.35),
        0 0 5px rgba(255,220,120,.35);
    z-index: 8;
}

#tir21Pointe {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 34px;
    height: 34px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: visible;
    background:
        radial-gradient(circle at 28% 22%,
            rgba(255,255,255,.95) 0%,
            rgba(255,255,255,.35) 10%,
            transparent 16%),
        radial-gradient(circle at 30% 22%,
            #fffef4 0%,
            #ffe88f 20%,
            #f4c643 42%,
            #c89215 68%,
            #7a5708 100%);
    border: 2px solid #f7d86a;
    box-shadow:
        inset 4px 4px 8px rgba(255,255,255,.45),
        inset -6px -8px 12px rgba(0,0,0,.35),
        0 8px 12px rgba(0,0,0,.35),
        0 0 18px rgba(255,220,120,.45);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
    z-index: 15;
}

#tir21Pointe::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fffef2, #f3d05d, #b7860c);
    border: 2px solid #f7d86a;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.5),
        inset -2px -2px 3px rgba(0,0,0,.4);
}

#tir21Pointe::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -24px;
    transform: translateX(-50%);
    width: 12px;
    height: 26px;
    clip-path: polygon(35% 0, 65% 0, 100% 30%, 50% 100%, 0 30%);
    background: radial-gradient(
        circle at 30% 18%,
        #fffef4 0%,
        #ffe88f 18%,
        #f4c643 42%,
        #c89215 68%,
        #7a5708 100%
    );
    border: 1px solid #f7d86a;
    box-shadow:
        inset 2px 2px 3px rgba(255,255,255,.45),
        inset -3px -4px 5px rgba(0,0,0,.35),
        0 3px 5px rgba(0,0,0,.35),
        0 0 10px rgba(255,220,120,.35);
}

#tir21Plateau {
    position: absolute;
    width: min(90vw, 600px);
    height: min(90vw, 600px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotateX(45deg);
    border-radius: 50%;
    overflow: visible;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(130,190,255,.18) 0deg,
        transparent 2deg,
        transparent 15deg
    );
}

.tir21Cercle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(130,190,255,.35);
    box-shadow: 0 0 20px rgba(100,180,255,.2);
}

.tir21Cercle1 {
    width: 25%;
    height: 25%;
}

.tir21Cercle2 {
    width: 50%;
    height: 50%;
}

.tir21Cercle3 {
    width: 86%;
    height: 86%;
}

#tir21Plateau::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(150,230,255,.8),
        rgba(100,180,255,.15) 40%,
        transparent 70%
    );
    filter: blur(2px);
    animation: tir21Pulse 3s infinite ease-in-out;
}

#tir21Plateau::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 90%;
    height: 90%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(150,220,255,.25);
    animation: tir21RotationCosmique 35s linear infinite;
}

@keyframes tir21Pulse {
    0% {
        opacity: .4;
        transform: translate(-50%, -50%) scale(.8);
    }
    50% {
        opacity: .9;
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        opacity: .4;
        transform: translate(-50%, -50%) scale(.8);
    }
}

@keyframes tir21RotationCosmique {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

#tir21Message {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 4px;
    font-size: 18px;
    opacity: .8;
    text-align: center;
    white-space: nowrap;
}




#tir21Resultat {
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    letter-spacing: 2px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    padding: 12px 24px;
    background: rgba(15,20,35,.55);
    border: 1px solid rgba(255,230,150,.55);
    border-radius: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 0 20px rgba(255,220,120,.25),
        inset 0 0 12px rgba(255,255,255,.08);
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 0 10px rgba(255,255,255,.5);
    transition: opacity 2s, transform 2s;
}

#tir21Resultat.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
}







#tir21Scene{
    min-height:500px;
}

#tir21ZonePendule,
#tir21Plateau{
    top:43%;
}

#tir21Message{
    top:90%;
}



@media screen and (max-width:768px) {
#tir21Bouton {
      margin-bottom: 80px !important;
}
	#tir21Message{
    top:1%;
}
}