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

#tir54Intro{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:25px;
  width:100%;
  text-align:center
}

#tir54IntroImage{
  width:100%;
  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
}

#tir54IntroImage img{
  display:block;
  width:100%;
  height:auto
}

#tir54BtnStart{margin-top:10px}

.btntir{
  display:inline-flex!important;
  justify-content:center;
  align-items:center
}

#tir54-croix {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0px;
color: inherit;
}
#tir54-croix [hidden],
#tir54IntroJeu[hidden],
#tir31Intro[hidden] {
display: none !important;
}
.tir54-consigne {
max-width: 650px;
margin: 0 auto 24px;
text-align: center;
line-height: 1.7;
}
.tir54-pioche {
    text-align: center;
    padding: 25px 0;
    min-height: 225px;
}

.tir54-paquet {
    display: block;
    width: 150px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: none;
    transition: none;
}

.tir54-paquet:hover {
    transform: none;
}
.tir54-paquet:focus-visible,
.tir54-recommencer:focus-visible {
outline: 3px solid #b58b48;
outline-offset: 5px;
}
.tir54-paquet img {
display: block;
width: 100%;
height: auto;
border-radius: 7px;
box-shadow: 0 5px 16px rgb(0 0 0 / 20%);
}
.tir54-paquet:disabled,
.tir54-recommencer:disabled {
cursor: wait;
opacity: 0.65;
}
/* =========================================
PLATEAU DE LA CROIX CELTIQUE
========================================= */
.tir54-plateau {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    gap: 14px 8px;
    align-items: start;
    align-content: start;
    justify-items: stretch;
    width: 100%;
    max-width: 1100px;
    margin: 0px auto 0px;
    overflow-anchor: none;
}
.tir54-emplacement {
min-width: 0;
text-align: center;
}
/* Croix centrale */
.tir54-emplacement[data-pos="1"] {
grid-column: 2;
grid-row: 2;
z-index: 1;
}
.tir54-emplacement[data-pos="2"] {
grid-column: 2;
grid-row: 2;
z-index: 2;
transform: rotate(90deg) scale(0.82);
}
.tir54-emplacement[data-pos="3"] {
grid-column: 2;
grid-row: 3;
}
.tir54-emplacement[data-pos="4"] {
grid-column: 1;
grid-row: 2;
}
.tir54-emplacement[data-pos="5"] {
grid-column: 2;
grid-row: 1;
}
.tir54-emplacement[data-pos="6"] {
grid-column: 3;
grid-row: 2;
}
/* Colonne des quatre dernières cartes */
.tir54-emplacement[data-pos="7"] {
grid-column: 5;
grid-row: 1;
}
.tir54-emplacement[data-pos="8"] {
grid-column: 5;
grid-row: 2;
}
.tir54-emplacement[data-pos="9"] {
grid-column: 5;
grid-row: 3;
}
.tir54-emplacement[data-pos="10"] {
grid-column: 5;
grid-row: 4;
}
.tir54-numero {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
margin-bottom: 7px;
border-radius: 50%;
background: #725331;
color: #fff;
font-size: 13px;
font-weight: 700;
}
/* =========================================
CARTES ET RETOURNEMENT
========================================= */
.tir54-carte {
    width: 100%;
    max-width: 105px;
    margin: 0 auto;
    perspective: 1000px;
    aspect-ratio: 3 / 5;
}

.tir54-carte-interieur {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 5;
    transform-style: preserve-3d;
    transition: transform 0.65s ease;
}
.tir54-carte-interieur.est-retournee {
transform: rotateY(180deg);
}
.tir54-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 6px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.tir54-face img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.tir54-face-avant {
transform: rotateY(180deg);
}
.tir54-position {
margin: 10px 0 0;
font-size: 0.88rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
.tir54-image-manquante {
visibility: hidden;
}
/* =========================================
INTERPRÉTATIONS
========================================= */
.tir54-definitions {
margin: 35px auto;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.tir54-definitions.est-visible {
opacity: 1;
transform: translateY(0);
}
.tir54-definitions > h3 {
margin-bottom: 25px;
text-align: center;
}
#tir54-textes {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.tir54-definition {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
align-content: start;
gap: 5px 16px;
padding: 0px;
border: 1px solid rgb(128 128 128 / 30%);
border-radius: 8px;
}
.tir54-miniature {
grid-column: 1;
grid-row: 1 / span 3;
display: block;
width: 76px;
height: auto;
border-radius: 4px;
}
.tir54-definition h4,
.tir54-nom-definition,
.tir54-texte-definition {
grid-column: 2;
margin: 0;
}
.tir54-definition h4 {
font-size: 1rem;
line-height: 1.4;
}
.tir54-nom-definition {
font-weight: 600;
margin: 3px 0 6px;
}
.tir54-texte-definition {
line-height: 1.7;
overflow-wrap: anywhere;
}
.tir54-recommencer {
display: block;
margin: 30px auto;
}
.tir54-erreur {
margin: 15px 0;
color: #a12626;
text-align: center;
}
/* =========================================
TABLETTES ET MOBILES
========================================= */
@media (max-width: 800px) {
.tir54-plateau {
grid-template-columns: repeat(5, minmax(90px, 1fr));
gap: 16px 8px;
overflow: visible;
}
.tir54-carte {
max-width: 110px;
}
.tir54-position {
font-size: 0.78rem;
}
#tir54-textes {
grid-template-columns: 1fr;
}
.tir54-definition {
padding: 14px;
}
	
	#tir54BtnStart{margin-bottom:80px!important;}
	
	
}
@media (max-width: 520px) {
.tir54-plateau {
grid-template-columns: repeat(5, minmax(74px, 1fr));
gap: 12px 5px;
margin-top: 15px;
}
.tir54-carte {
max-width: 90px;
}
.tir54-emplacement[data-pos="2"] {
transform: rotate(90deg) scale(0.78);
}
.tir54-numero {
width: 22px;
height: 22px;
font-size: 11px;
}
.tir54-position {
font-size: 0.72rem;
line-height: 1.3;
}
.tir54-paquet {
width: 125px;
}
.tir54-definition {
grid-template-columns: 62px minmax(0, 1fr);
gap: 6px 12px;
}
.tir54-miniature {
width: 62px;
}
}
@media (prefers-reduced-motion: reduce) {
.tir54-carte-interieur,
.tir54-definitions,
.tir54-paquet {
transition: none;
}
}
@media (max-width: 800px) {
    .tir54-carte {
        max-width: 100px;
    }
}

@media (max-width: 520px) {
    .tir54-carte {
        max-width: 78px;
    }
}


#tir54-croix,
#tir54-pioche,
#tir54-resultat {
    overflow-anchor: none;
}
.tir54-definitions {
    overflow-anchor: none;
}
.tir54-plateau {
    align-items: start;
    align-content: start;
}
.tir54-emplacement {
    min-width: 0;
    align-self: start;
}


/* =========================================
INTERPRÉTATIONS — STYLE HARMONIEUX
========================================= */

.tir54-definitions {
    margin: 32px auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.tir54-definitions.est-visible {
    opacity: 1;
    transform: translateY(0);
}

.tir54-definitions > h3 {
    margin: 0 0 22px;
    text-align: center;
    font-weight: 500;
    line-height: 1.3;
}

#tir54-textes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.tir54-definition {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-content: start;
    gap: 4px 14px;
    padding: 14px;
    border: 1px solid rgb(128 128 128 / 22%);
    border-radius: 10px;
}

.tir54-miniature {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: block;
    width: 68px;
    height: auto;
    border-radius: 5px;
}

.tir54-definition h4,
.tir54-nom-definition,
.tir54-texte-definition {
    grid-column: 2;
    margin: 0;
    overflow-wrap: anywhere;
}

.tir54-definition h4 {
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.35;
}

.tir54-nom-definition {
    margin: 2px 0 5px;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
}

.tir54-texte-definition {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.tir54-recommencer {
    display: block;
    margin: 28px auto;
}

/* Tablettes et mobiles */
@media (max-width: 800px) {
    #tir54-textes {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tir54-definition {
        padding: 13px;
    }
}

@media (max-width: 520px) {
    .tir54-definition {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 4px 11px;
        padding: 11px;
    }

    .tir54-miniature {
        width: 58px;
    }

    .tir54-definition h4 {
        font-size: 0.9rem;
    }

    .tir54-nom-definition {
        font-size: 0.84rem;
    }

    .tir54-texte-definition {
        font-size: 0.86rem;
        line-height: 1.45;
    }
}











#tir54-textes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tir54-definition {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-content: start;
    gap: 3px 11px;
    padding: 10px;
    border: 1px solid rgb(128 128 128 / 20%);
    border-radius: 8px;
}

.tir54-miniature {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: block;
    width: 58px;
    height: auto;
    border-radius: 4px;
}

@media (max-width: 800px) {
    #tir54-textes {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .tir54-definition {
        padding: 10px;
    }
}






/* CROIX CELTIQUE — ADAPTATION AUX MOBILES */
@media (max-width: 590px) {
    .tir54-plateau {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 8px 3px;
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .tir54-emplacement {
        min-width: 0;
    }

    .tir54-carte {
        width: 100%;
        max-width: 100%;
    }

    .tir54-numero {
        width: 18px;
        height: 18px;
        margin-bottom: 4px;
        font-size: 10px;
    }

    .tir54-position {
        font-size: 0.62rem;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .tir54-emplacement[data-pos="2"] {
        transform: rotate(90deg) scale(0.68);
    }
	
	.tir54-resultat {
        margin-bottom: 80px!important;
    }
}