*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;margin:0;overflow-x:hidden}
.ORTIR-container {
    padding: 0 !important;
}

.ORACLES-TIRAGES {
    width: 100% !important;
}

.tir37-app {
position: relative;
overflow: hidden;
}

.tir37-screen {
position: relative;
}

.tir37-is-hidden {
display: none !important;
}

.tir37-button {
border: 0;
border-radius: 999px;
padding: 15px 38px;

font-family: inherit;
font-size: 18px;
font-weight: 600;

cursor: pointer;

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;

}

.tir37-button:hover {
transform: translateY(-2px);
}

.tir37-button:active {
transform: translateY(0);
}

.tir37-button:focus-visible,
.tir37-envelope-button:focus-visible {
outline: 3px solid #6d5943;
outline-offset: 5px;
}

.tir37-screen-intro {
display: flex;
align-items: center;
justify-content: center;

padding: 0px;
}

.tir37-intro-content {
display: flex;
flex-direction: column;
align-items: center;



text-align: center;

}

.tir37-intro-image {
    position: relative;

    width: 90%;
    max-width: 700px;

    margin: 0 auto 30px;

    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;
}

.tir37-intro-card {
    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}

.tir37-intro-card img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: inherit;
}

.tir37-intro-card-title {
position: relative;
z-index: 1;

font-size: 20px;
line-height: 1.2;
font-weight: bold;
}

.tir37-title {
margin: 0 0 18px;
font-size: clamp(34px, 6vw, 56px);
line-height: 1.05;
font-weight: 500;
}

.tir37-description {
max-width: 520px;
margin: 0 0 32px;
font-size: 18px;
line-height: 1.7;
}

.tir37-screen-draw {
display: flex;
align-items: center;
justify-content: center;
padding: 0px;
}

.tir37-draw-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}


.tir37-info-bar {
width: min(720px, calc(100% - 20px));
padding: 0px;
border: 1px solid rgba(86, 64, 40, 0.2);
border-radius: 8px;
background: rgba(255, 250, 240, 0.8);
box-shadow:
    0 6px 20px rgba(60, 42, 25, 0.08);
text-align: center;
font-size: 17px;
line-height: 1.5;
color: #594633;
}

.tir37-envelope-area {
position: relative;
margin-top: 80px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 430px;
}

.tir37-envelope-button {
position: relative;
width: 390px;
height: 275px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
perspective: 1200px;
transition:
    transform 0.25s ease,
    opacity 0.45s ease;
}

.tir37-envelope-button:hover {
transform: translateY(-5px);
}

.tir37-envelope-button:active {
transform: translateY(0);
}

.tir37-envelope {
position: absolute;
inset: 0;
display: block;
overflow: visible;
filter:
    drop-shadow(
        0 20px 20px rgba(55, 38, 24, 0.22)
    );
}

.tir37-envelope-back {
position: absolute;
inset: 0;
border-radius: 5px;
background:
    linear-gradient(
        145deg,
        #e4cda9,
        #c9aa7d
    );
border: 1px solid #a98a62;
z-index: 1;
}

.tir37-envelope-paper {
position: absolute;
left: 50%;
bottom: 20px;
width: 270px;
height: 175px;
transform:
    translateX(-50%)
    translateY(-5px);
transition:
    transform 1.2s cubic-bezier(0.2, 0.8, 0.25, 1);
z-index: 2;
}

.tir37-envelope-card {
position: absolute;
left: 50%;
top: 50%;
width: 175px;
height: 270px;
overflow: hidden;
border-radius: 3px;
box-shadow:
    0 3px 8px rgba(55, 38, 24, 0.15);
transform:
    translate(-50%, -50%)
    rotate(-90deg);
transform-origin: center center;
z-index: 2;
}

.tir37-envelope-card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
}

.tir37-envelope-front {
position: absolute;
inset: 0;
clip-path:
    polygon(
        0 0,
        50% 58%,
        100% 0,
        100% 100%,
        0 100%
    );

border-radius: 5px;
background:
    linear-gradient(
        145deg,
        #d8bb8e,
        #c19d6c
    );
border: 1px solid #a98a62;
z-index: 3;
}

.tir37-envelope-flap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 58%;
clip-path:
    polygon(
        0 0,
        100% 0,
        50% 100%
    );
background:
    linear-gradient(
        145deg,
        #ecd9ba,
        #cdae7d
    );
border-radius: 5px 5px 0 0;
transform-origin: top center;
transition:
    transform 1.2s cubic-bezier(0.2, 0.8, 0.25, 1);
backface-visibility: hidden;
z-index: 4;
}

.tir37-envelope-button.tir37-envelope-opening {
pointer-events: none;
}

.tir37-envelope-button.tir37-envelope-opening
.tir37-envelope-flap {
transform: rotateX(180deg);
}

.tir37-envelope-button.tir37-envelope-opening
.tir37-envelope-paper {
transform:
translateX(-50%)
translateY(-150px);	
	transition:
    transform 1.5s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.tir37-envelope-button.tir37-envelope-rotate
.tir37-envelope-card {
transform:
    translate(-50%, -50%)
    rotate(0deg);
transition:
    transform 1.5s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.tir37-envelope-button.tir37-envelope-disappear {
opacity: 0;
transition:
    opacity 2s ease;
}

.tir37-envelope-button.tir37-envelope-grow
.tir37-envelope-card {
transform:
    translate(-50%, -50%)
    rotate(0deg)
    scale(1.55);
transition:
    transform 1.5s cubic-bezier(0.18, 0.8, 0.25, 1);
}

.tir37-envelope-button.tir37-envelope-slide-card
.tir37-envelope-card {
transform:
    translate(
        calc(-50% - 150px),
        -50%
    )
    rotate(0deg)
    scale(1.55);
transition:
    transform 1.5s cubic-bezier(0.18, 0.8, 0.25, 1);
}

.tir37-status {
min-height: 24px;
margin-top: 20px;
font-size: 15px;
color: #6a5845;
text-align: center;
}

.tir37-screen-result {
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
padding: 0px;
}

.tir37-result-content {
display: flex;
align-items: center;
width: min(1120px, 100%);
min-height: 500px;
gap: clamp(50px, 8vw, 110px);
}

.tir37-result-card-area {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 299px;
}

.tir37-card-container {
    position: relative;
    width: 299px;
    height: 454px;
    opacity: 0;
    transform:
        translateX(0)
        scale(1)
        rotate(0deg);
    transition:
        opacity 0.9s ease;
}

.tir37-card-container.tir37-card-visible {
    opacity: 1;
    transform:
        translateX(0)
        scale(1)
        rotate(0deg);
}

.tir37-card-image {
display: block;
width: 299px;
height: 454px;
object-fit: cover;
border-radius: 4px;
box-shadow:
    0 20px 35px rgba(50, 35, 20, 0.25);
}

.tir37-result-information {
flex: 1;
min-width: 0;
opacity: 0;
transform: translateX(40px);
transition:
    opacity 2s ease 0.45s,
    transform 2s ease 0.45s;
}

.tir37-result-information.tir37-information-visible {
opacity: 1;
transform: translateX(0);
}

.tir37-card-name {
margin: 0 0 25px;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.1;
font-weight: 500;
}

.tir37-card-text {
max-width: 650px;
font-size: 18px;
line-height: 1.8;
}

.tir37-card-text p {
margin: 0 0 16px;
}

@media (max-width: 850px) {

.tir37-result-content {
    gap: 45px;
}

.tir37-result-card-area {
    flex-basis: 250px;
}

.tir37-card-container {
    width: 250px;
    height: auto;
    aspect-ratio: 299 / 454;
}

.tir37-card-image {
    width: 100%;
    height: 100%;
}

.tir37-card-text {
    font-size: 16px;
    line-height: 1.7;
}

}

@media (max-width: 650px) {

#tir37-start-button, #tir37-card-text {
margin-bottom: 80px!important;
}		
	
.tir37-screen-intro {
    padding: 0px;
}

.tir37-intro-image {
}

.tir37-intro-card {
}

.tir37-intro-card-title {
    font-size: 17px;
}

.tir37-title {
    font-size: 36px;
}

.tir37-description {
    font-size: 16px;
    line-height: 1.6;
}

.tir37-info-bar {
    margin-bottom: 35px;
    padding: 12px 15px;
    font-size: 15px;
}

.tir37-envelope-area {
    min-height: 330px;
}

.tir37-envelope-button {
    width: min(350px, 90vw);
    height: min(247px, 64vw);
}

.tir37-envelope-paper {
    width: min(230px, 75vw);
    height: min(150px, 49vw);
}

.tir37-envelope-card {
    width: 150px;
    height: 230px;
}

.tir37-envelope-button.tir37-envelope-slide-card
.tir37-envelope-card {

    transform:
        translate(
            calc(-50% - 90px),
            -50%
        )
        rotate(0deg)
        scale(1.35);
}

.tir37-screen-result {
    align-items: flex-start;
    padding: 45px 20px 60px;
}

.tir37-result-content {
    flex-direction: column;
    gap: 35px;
}

.tir37-result-card-area {
    flex: none;
}

.tir37-card-container {
    width: min(299px, 78vw);
    height: auto;
    aspect-ratio: 299 / 454;
}

.tir37-card-image {
    width: 100%;
    height: 100%;
}

.tir37-result-information {
    width: 100%;
    text-align: center;
}

.tir37-card-name {
    margin-bottom: 18px;
    font-size: 32px;
}

.tir37-card-text {
    font-size: 16px;
    line-height: 1.65;
}
}


@media (max-width: 400px) {
	
	#tir37-start-button {
		margin-bottom: 80px;
	}

.tir37-button {
    padding: 13px 30px;

    font-size: 16px;
}

.tir37-envelope-area {
    min-height: 280px;
}

.tir37-card-name {
    font-size: 28px;
}

.tir37-envelope-paper {
    width: 210px;
    height: 140px;
}

.tir37-envelope-card {
    width: 140px;
    height: 210px;
}

.tir37-envelope-button.tir37-envelope-slide-card
.tir37-envelope-card {

    transform:
        translate(
            calc(-50% - 70px),
            -50%
        )
        rotate(0deg)
        scale(1.25);}

}

.tir37-animated-card {
    position: fixed;
    transform-style: preserve-3d;
    transform-origin: center center;
    backface-visibility: hidden;
}


.tir37-animated-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    backface-visibility: hidden;
}

.tir37-animated-card-face img {
    display: block;
    width: 100%;
    height: 100%; 
    object-fit: cover;
    border-radius: inherit;
}

.tir37-animated-card-back {
    transform:
        rotateY(0deg);
    box-shadow:
        0 20px 35px rgba(50, 35, 20, 0.25);
}

.tir37-animated-card-front {
    transform:
        rotateY(180deg);
    box-shadow:
        0 20px 35px rgba(50, 35, 20, 0.25);
}

@media (prefers-reduced-motion: reduce) {

.tir37-button,
.tir37-envelope-button,
.tir37-envelope-flap,
.tir37-envelope-paper,
.tir37-envelope-card,
.tir37-card-container,
.tir37-result-information {
    transition: none !important;
}
}