*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;margin:0;overflow-x:hidden}
#tir52Container{width:100%}
#tir52Container *{box-sizing:border-box}

.tir52Hidden{display:none!important}
.tir52Visible{display:block}
.tir52FadeIn{animation:tir52FadeIn .6s ease forwards}
.tir52FadeOut{animation:tir52FadeOut .6s ease forwards}

@keyframes tir52FadeIn{from{opacity:0}to{opacity:1}}
@keyframes tir52FadeOut{from{opacity:1}to{opacity:0}}

#tir52Intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;width:100%;text-align:center}
#tir52IntroImage{width:90%;max-width:500px;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}
#tir52IntroImage img{display:block;width:100%;height:auto}
#tir52IntroContent{max-width:900px;margin:auto}
#tir52IntroTitre{margin:0 0 20px;font-size:clamp(2rem,4vw,3rem);font-weight:normal;color:#f0d88a}
#tir52IntroTexte{margin:0;line-height:1.5;font-size:1rem}
#tir52BtnStart{margin-top:30px}
.btntir{display:inline-flex!important;justify-content:center;align-items:center}

#tir52Game{width:100%;max-width:100%;overflow:hidden;text-align:center}

#tir52Selection{display:flex;justify-content:center;align-items:flex-start;gap:clamp(5px,1.5vw,20px);width:100%;margin:0}
.tir52Slot{flex:0 1 auto;width:auto;min-width:0;display:flex;flex-direction:column;align-items:center}
.tir52SlotTitle{margin:0;font-size:clamp(.68rem,1.5vw,1.05rem);font-weight:normal;color:#f0d88a;text-align:center;line-height:1.2;white-space:normal}

.tir52SelectedCard{width:clamp(45px,10vw,82px);aspect-ratio:300/420;border:2px dashed rgba(255,255,255,.20);border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);transition:.4s;overflow:hidden;position:relative}
.tir52SelectedCard img{display:block;width:100%;height:100%;object-fit:contain;background:#16130d}

#tir52RibbonContainer{
    width:100%;
    overflow-x:auto;
    overflow-y:visible;

    margin:15px auto 25px;

    padding:35px 10px 30px;

    scrollbar-width:thin;
    scroll-behavior:smooth;

    display:flex;
    justify-content:center;
}
#tir52Ribbon{
    display:grid;
    grid-template-columns:repeat(16, 1fr);
    grid-template-rows:auto auto;
    align-items:end;
    justify-content:center;
    width:min(100%, 1500px);
    padding:0 20px;
    row-gap:15px;
}
.tir52RibbonCard{
    position:relative;

    width:clamp(55px, 5.2vw, 90px);
    aspect-ratio:300/420;

    cursor:pointer;
    user-select:none;

    transition:
        transform .30s ease,
        margin-bottom .30s ease,
        filter .30s ease,
        opacity .30s ease,
        box-shadow .30s ease;

    z-index:1;

    margin-left:clamp(-25px, -2vw, -10px);
}

.tir52RibbonCard:nth-child(16n + 1){
    margin-left:0;
}
.tir52RibbonCard:first-child{margin-left:0}
.tir52RibbonCard img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.45);pointer-events:none}
.tir52RibbonCard:hover{transform:translateY(-18px);z-index:50;box-shadow:0 14px 28px rgba(0,0,0,.45)}
.tir52RibbonCard.tir52Chosen{opacity:0;pointer-events:none;cursor:default;transform:none}
.tir52RibbonCard.tir52Chosen img{visibility:hidden}
#tir52Ribbon.tir52Locked{pointer-events:none}
#tir52Ribbon.tir52Locked .tir52RibbonCard{cursor:default;filter:grayscale(.55)}
#tir52Ribbon.tir52Locked .tir52RibbonCard:hover{transform:none}

#tir52RibbonContainer.tir52RibbonHide{animation:tir52RibbonHide .8s ease forwards}
@keyframes tir52RibbonHide{0%{opacity:1;transform:translateY(0)}60%{opacity:.5}100%{opacity:0;transform:translateY(20px);visibility:hidden;height:0;margin:0;padding:0}}

#tir52InfoBar{display:inline-block;width:auto;max-width:90%;margin:15px;padding:14px 18px;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid rgba(216,199,155,.25);border-radius:8px;text-align:center}
#tir52InfoText{width:100%;max-width:100%;margin:0;overflow-wrap:break-word;font-size:1rem;line-height:1.5;color:#e6d7b2;transition:opacity .4s ease}

.tir52CardFlip{width:100%;height:100%;perspective:1000px}
.tir52CardInner{position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d}
.tir52CardFront,.tir52CardBack{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.tir52CardFront img,.tir52CardBack img{display:block;width:100%;height:100%;object-fit:contain}
.tir52CardBack{transform:rotateY(180deg)}
.tir52Flipped .tir52CardInner{transform:rotateY(180deg)}

#tir52ReadingContent{display:flex;align-items:flex-start;justify-content:center;gap:clamp(25px,5vw,60px);width:100%;margin-top:30px}


#tir52ReadingCard{
    flex:0 0 auto;
    width:clamp(180px,24vw,260px);
    display:flex;
    flex-direction:column;
    align-items:center;
	margin-top: 30px;
}
#tir52BigCardContainer{width:100%;padding:0;border-radius:18px;background:radial-gradient(circle,rgba(240,216,138,.35),rgba(240,216,138,0) 70%);border:1px solid rgba(216,199,155,.35);box-shadow:0 0 35px rgba(214,180,106,.25)}
#tir52BigCardImage{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.55)}
#tir52CardTitle{text-align:center;color:#f0d88a;font-size:clamp(.9rem,1.8vw,1.4rem);font-weight:normal;letter-spacing:2px;text-transform:uppercase}
#tir52ReadingText{flex:1;max-width:700px}

#tir52DefinitionBlock,#tir52AnswerBlock{background:rgba(255,255,255,.05);border:1px solid rgba(216,199,155,.25);border-radius:14px;padding:15px;box-shadow:0 8px 25px rgba(0,0,0,.25)}
#tir52AnswerBlock{margin-top:15px}
.tir52BlockTitle{margin:0;color:#f0d88a;font-size:1.25rem;font-weight:normal;letter-spacing:1px}
#tir52DefinitionText,#tir52AnswerText{line-height:1.5;color:#e6d7b2;font-size:1rem}

.tir52Disabled{pointer-events:none}
.tir52Invisible{visibility:hidden}
.tir52Transparent{opacity:0}
.tir52Opaque{opacity:1}

@media(max-width:700px){
#tir52Selection{gap:5px;margin-top:15px}
.tir52SelectedCard{width:60px}
.tir52SlotTitle{font-size:.72rem}
#tir52RibbonContainer{justify-content:center}
#tir52Ribbon{justify-content:center}
.tir52RibbonCard{width:clamp(28px,8vw,48px);margin-left:clamp(-35px,-6vw,-18px)}
#tir52ReadingContent{flex-direction:column;align-items:center;gap:30px}
#tir52ReadingCard{width:180px}
#tir52ReadingText{width:100%;max-width:none}
#tir52DefinitionBlock,#tir52AnswerBlock{padding:18px}
#tir52BtnStart{margin-bottom:80px!important}
#tir52AnswerBlock{margin-bottom:70px}
#tir52InfoBar{margin:15px auto 50px!important}
}

@media(max-width:420px){
.tir52SelectedCard{width:52px}
.tir52SlotTitle{font-size:.65rem}
.tir52RibbonCard{width:clamp(24px,8vw,34px);margin-left:clamp(-30px,-6vw,-15px)}
}

@media(max-width:380px){
#tir52Selection{gap:3px}
.tir52SelectedCard{width:47px}
.tir52SlotTitle{font-size:.6rem}
#tir52ReadingCard{width:140px}
#tir52CardTitle{font-size:1.1rem}
}