@font-face {
    font-family: 'GamePaused';
    font-weight: 400;
    font-style: normal;
    src: url('../font/GamePaused-Regular.woff2') format('woff2'),
        url('../font/GamePaused-Regular.woff') format('woff');
}

:root {
    --Blanc-casse: #FFF9D7;
    --Gris-sombre: #292929;
    --Gris-Faible-Opa: rgba(0, 0, 0, 0.7);
    --Jaune: #FFC42E;
    --Red: #FE2A49;
    --Blue: #3B64A3;
    --Violet: #523480;
    --Ecarlate: #F64B4B;

    --Radius-Int: 2px;
    --Radius-ext: 4px;
    --Border-Int: 3px solid var(--Gris-sombre);
    --Border-Out: 3px solid var(--Blanc-casse);
    --Border-Out-Selected: 6px solid var(--Jaune);

    --h3: 1.563rem;
    --h4: 1.25rem;
    --micro: 0.813rem;
    --BIG: 3.125rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0px;
    /* height: 100vh; */
    /* width: 100vw; */
    font-family: 'GamePaused', sans-serif;
    background: url(../asset/IUT_site_de_champs.png);
    background-size: cover;
    background-position: center;
}

body>h1 {
    margin: 0px;
}

body>pre {
    margin: 0px;
    width: 100%;
}

.BTN {
    display: block;
    padding: 10px 30px;
    border-radius: var(--Radius-ext);
    border: var(--Border-Int);
    outline: var(--Border-Out);
    margin: 10px;
    width: fit-content;
    background: url(../asset/Texture1.svg) center;
    text-decoration: none;

    font-size: 1.563rem;
    font-family: 'GamePaused', sans-serif;
    text-align: center;

    cursor: pointer;
}

.BTN:hover {
    color: var(--Jaune);
    outline-color: var(--Jaune);
    transform: scale(1.05);
}

.BTN:disabled {
    outline: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.BTN:disabled:hover {
    color: var(--Blanc-casse);
    outline-color: none;
    transform: scale(1);
}

.Text_Border {
    color: var(--Blanc-casse);
    text-shadow: var(--Gris-sombre) 2px 0px 0px, var(--Gris-sombre) 1.75517px 0.958851px 0px, var(--Gris-sombre) 1.0806px 1.68294px 0px, var(--Gris-sombre) 0.141474px 1.99499px 0px, var(--Gris-sombre) -0.832294px 1.81859px 0px, var(--Gris-sombre) -1.60229px 1.19694px 0px, var(--Gris-sombre) -1.97998px 0.28224px 0px, var(--Gris-sombre) -1.87291px -0.701566px 0px, var(--Gris-sombre) -1.30729px -1.5136px 0px, var(--Gris-sombre) -0.421592px -1.95506px 0px, var(--Gris-sombre) 0.567324px -1.91785px 0px, var(--Gris-sombre) 1.41734px -1.41108px 0px, var(--Gris-sombre) 1.92034px -0.558831px 0px;
}

.Shadow--J1 {
    text-shadow: var(--Red) 8px 0px 0px, var(--Red) 7.93758px 0.997398px 0px, var(--Red) 7.7513px 1.97923px 0px, var(--Red) 7.44406px 2.93018px 0px, var(--Red) 7.02066px 3.8354px 0px, var(--Red) 6.48771px 4.68078px 0px, var(--Red) 5.85351px 5.45311px 0px, var(--Red) 5.12797px 6.14035px 0px, var(--Red) 4.32242px 6.73177px 0px, var(--Red) 3.44941px 7.21814px 0px, var(--Red) 2.52258px 7.59188px 0px, var(--Red) 1.55638px 7.84714px 0px, var(--Red) 0.565898px 7.97996px 0px, var(--Red) -0.433417px 7.98825px 0px, var(--Red) -1.42597px 7.87189px 0px, var(--Red) -2.39627px 7.63269px 0px, var(--Red) -3.32917px 7.27438px 0px, var(--Red) -4.21013px 6.80256px 0px, var(--Red) -5.02539px 6.22459px 0px, var(--Red) -5.76223px 5.54948px 0px, var(--Red) -6.40915px 4.78778px 0px, var(--Red) -6.95606px 3.95136px 0px, var(--Red) -7.39442px 3.05329px 0px, var(--Red) -7.71739px 2.10757px 0px, var(--Red) -7.91994px 1.12896px 0px, var(--Red) -7.9989px 0.132735px 0px, var(--Red) -7.95304px -0.865561px 0px, var(--Red) -7.78307px -1.85035px 0px, var(--Red) -7.49165px -2.80627px 0px, var(--Red) -7.08333px -3.71839px 0px, var(--Red) -6.56447px -4.57249px 0px, var(--Red) -5.94318px -5.35524px 0px, var(--Red) -5.22915px -6.05442px 0px, var(--Red) -4.43352px -6.65912px 0px, var(--Red) -3.5687px -7.15991px 0px, var(--Red) -2.6482px -7.54898px 0px, var(--Red) -1.68637px -7.82024px 0px, var(--Red) -0.698222px -7.96947px 0px, var(--Red) 0.300817px -7.99434px 0px, var(--Red) 1.29516px -7.89446px 0px, var(--Red) 2.2693px -7.67139px 0px, var(--Red) 3.20802px -7.32862px 0px, var(--Red) 4.09668px -6.87148px 0px, var(--Red) 4.92142px -6.30711px 0px, var(--Red) 5.66936px -5.64432px 0px, var(--Red) 6.32883px -4.89346px 0px, var(--Red) 6.88954px -4.06623px 0px, var(--Red) 7.34274px -3.17555px 0px, var(--Red) 7.68136px -2.23532px 0px, var(--Red) 7.90012px -1.26021px 0px, var(--Red) 7.9956px -0.265434px 0px;
}

.Shadow--J2 {
    text-shadow: var(--Blue) 8px 0px 0px, var(--Blue) 7.93758px 0.997398px 0px, var(--Blue) 7.7513px 1.97923px 0px, var(--Blue) 7.44406px 2.93018px 0px, var(--Blue) 7.02066px 3.8354px 0px, var(--Blue) 6.48771px 4.68078px 0px, var(--Blue) 5.85351px 5.45311px 0px, var(--Blue) 5.12797px 6.14035px 0px, var(--Blue) 4.32242px 6.73177px 0px, var(--Blue) 3.44941px 7.21814px 0px, var(--Blue) 2.52258px 7.59188px 0px, var(--Blue) 1.55638px 7.84714px 0px, var(--Blue) 0.565898px 7.97996px 0px, var(--Blue) -0.433417px 7.98825px 0px, var(--Blue) -1.42597px 7.87189px 0px, var(--Blue) -2.39627px 7.63269px 0px, var(--Blue) -3.32917px 7.27438px 0px, var(--Blue) -4.21013px 6.80256px 0px, var(--Blue) -5.02539px 6.22459px 0px, var(--Blue) -5.76223px 5.54948px 0px, var(--Blue) -6.40915px 4.78778px 0px, var(--Blue) -6.95606px 3.95136px 0px, var(--Blue) -7.39442px 3.05329px 0px, var(--Blue) -7.71739px 2.10757px 0px, var(--Blue) -7.91994px 1.12896px 0px, var(--Blue) -7.9989px 0.132735px 0px, var(--Blue) -7.95304px -0.865561px 0px, var(--Blue) -7.78307px -1.85035px 0px, var(--Blue) -7.49165px -2.80627px 0px, var(--Blue) -7.08333px -3.71839px 0px, var(--Blue) -6.56447px -4.57249px 0px, var(--Blue) -5.94318px -5.35524px 0px, var(--Blue) -5.22915px -6.05442px 0px, var(--Blue) -4.43352px -6.65912px 0px, var(--Blue) -3.5687px -7.15991px 0px, var(--Blue) -2.6482px -7.54898px 0px, var(--Blue) -1.68637px -7.82024px 0px, var(--Blue) -0.698222px -7.96947px 0px, var(--Blue) 0.300817px -7.99434px 0px, var(--Blue) 1.29516px -7.89446px 0px, var(--Blue) 2.2693px -7.67139px 0px, var(--Blue) 3.20802px -7.32862px 0px, var(--Blue) 4.09668px -6.87148px 0px, var(--Blue) 4.92142px -6.30711px 0px, var(--Blue) 5.66936px -5.64432px 0px, var(--Blue) 6.32883px -4.89346px 0px, var(--Blue) 6.88954px -4.06623px 0px, var(--Blue) 7.34274px -3.17555px 0px, var(--Blue) 7.68136px -2.23532px 0px, var(--Blue) 7.90012px -1.26021px 0px, var(--Blue) 7.9956px -0.265434px 0px;

}
/*? --- Page Accueil  */

.acceuil {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.acceuil>h1 {
    display: none;
}

.Start_Btn {
    padding: 10px 30px 5px;
    font-size: var(--BIG);
    background: url(../asset/Texture5.svg) center;
    height: fit-content;
    width: fit-content;
}

/*? --- Page Séléction de personnage  */

.PersoMain {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr fit-content(100%);
    height: 100vh;
}

.PersoMain>h1 {
    display: none;
}

/*? --- Formulaire Séléction  */

.SpriteBack {
    position: fixed;
    z-index: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    width: 100vw;

    align-items: center;
    justify-items: center;
}

.SpriteBack img {
    /* aspect-ratio: 3/4; */
    height: 90vh;
    object-fit: cover;
    margin-bottom: -8vh;
}

.SpriteBack :nth-child(2) {
    transform: scaleX(-1);
}

.Choix_Haut {
    display: grid;
    grid-template-columns: 1fr fit-content(100%) 1fr;
    grid-template-rows: 1fr;
}

.Choix_Haut p {
    font-size: var(--h4);
}

.Choix_Haut .IconHaut, .Combat__Header .IconHaut{
    height: 20px;
    width: 20px;
}

.VS {
    font-size: var(--BIG);
    color: var(--Blanc-casse);
    text-shadow: var(--Violet) 8px 0px 0px, var(--Violet) 7.93758px 0.997398px 0px, var(--Violet) 7.7513px 1.97923px 0px, var(--Violet) 7.44406px 2.93018px 0px, var(--Violet) 7.02066px 3.8354px 0px, var(--Violet) 6.48771px 4.68078px 0px, var(--Violet) 5.85351px 5.45311px 0px, var(--Violet) 5.12797px 6.14035px 0px, var(--Violet) 4.32242px 6.73177px 0px, var(--Violet) 3.44941px 7.21814px 0px, var(--Violet) 2.52258px 7.59188px 0px, var(--Violet) 1.55638px 7.84714px 0px, var(--Violet) 0.565898px 7.97996px 0px, var(--Violet) -0.433417px 7.98825px 0px, var(--Violet) -1.42597px 7.87189px 0px, var(--Violet) -2.39627px 7.63269px 0px, var(--Violet) -3.32917px 7.27438px 0px, var(--Violet) -4.21013px 6.80256px 0px, var(--Violet) -5.02539px 6.22459px 0px, var(--Violet) -5.76223px 5.54948px 0px, var(--Violet) -6.40915px 4.78778px 0px, var(--Violet) -6.95606px 3.95136px 0px, var(--Violet) -7.39442px 3.05329px 0px, var(--Violet) -7.71739px 2.10757px 0px, var(--Violet) -7.91994px 1.12896px 0px, var(--Violet) -7.9989px 0.132735px 0px, var(--Violet) -7.95304px -0.865561px 0px, var(--Violet) -7.78307px -1.85035px 0px, var(--Violet) -7.49165px -2.80627px 0px, var(--Violet) -7.08333px -3.71839px 0px, var(--Violet) -6.56447px -4.57249px 0px, var(--Violet) -5.94318px -5.35524px 0px, var(--Violet) -5.22915px -6.05442px 0px, var(--Violet) -4.43352px -6.65912px 0px, var(--Violet) -3.5687px -7.15991px 0px, var(--Violet) -2.6482px -7.54898px 0px, var(--Violet) -1.68637px -7.82024px 0px, var(--Violet) -0.698222px -7.96947px 0px, var(--Violet) 0.300817px -7.99434px 0px, var(--Violet) 1.29516px -7.89446px 0px, var(--Violet) 2.2693px -7.67139px 0px, var(--Violet) 3.20802px -7.32862px 0px, var(--Violet) 4.09668px -6.87148px 0px, var(--Violet) 4.92142px -6.30711px 0px, var(--Violet) 5.66936px -5.64432px 0px, var(--Violet) 6.32883px -4.89346px 0px, var(--Violet) 6.88954px -4.06623px 0px, var(--Violet) 7.34274px -3.17555px 0px, var(--Violet) 7.68136px -2.23532px 0px, var(--Violet) 7.90012px -1.26021px 0px, var(--Violet) 7.9956px -0.265434px 0px;
}

.Choix_Haut > .VS {
    margin: auto 0px;
}

.Choix_Haut h2,
.Choix_Haut h3 {
    font-size: var(--BIG);
    color: var(--Blanc-casse);
}

.Choix_Haut h3 {
    margin: 10px 15px;
}

.Choix_Haut h2 {
    margin-bottom: 0px;
}

.sectionJ1 h3 {
    text-align: left;
}

.sectionJ2 h3 {
    text-align: right;
}

.Bloc_Stat {
    height: 100%;
    padding: 0px 15px;
}

.sectionJ2>.Bloc_Stat>* {
    margin-left: auto;
    flex-direction: row-reverse;
}

.Choix_Haut .sectionJ1 h2,
.Choix_Haut .sectionJ1 h3 {
    text-shadow: var(--Red) 8px 0px 0px, var(--Red) 7.93758px 0.997398px 0px, var(--Red) 7.7513px 1.97923px 0px, var(--Red) 7.44406px 2.93018px 0px, var(--Red) 7.02066px 3.8354px 0px, var(--Red) 6.48771px 4.68078px 0px, var(--Red) 5.85351px 5.45311px 0px, var(--Red) 5.12797px 6.14035px 0px, var(--Red) 4.32242px 6.73177px 0px, var(--Red) 3.44941px 7.21814px 0px, var(--Red) 2.52258px 7.59188px 0px, var(--Red) 1.55638px 7.84714px 0px, var(--Red) 0.565898px 7.97996px 0px, var(--Red) -0.433417px 7.98825px 0px, var(--Red) -1.42597px 7.87189px 0px, var(--Red) -2.39627px 7.63269px 0px, var(--Red) -3.32917px 7.27438px 0px, var(--Red) -4.21013px 6.80256px 0px, var(--Red) -5.02539px 6.22459px 0px, var(--Red) -5.76223px 5.54948px 0px, var(--Red) -6.40915px 4.78778px 0px, var(--Red) -6.95606px 3.95136px 0px, var(--Red) -7.39442px 3.05329px 0px, var(--Red) -7.71739px 2.10757px 0px, var(--Red) -7.91994px 1.12896px 0px, var(--Red) -7.9989px 0.132735px 0px, var(--Red) -7.95304px -0.865561px 0px, var(--Red) -7.78307px -1.85035px 0px, var(--Red) -7.49165px -2.80627px 0px, var(--Red) -7.08333px -3.71839px 0px, var(--Red) -6.56447px -4.57249px 0px, var(--Red) -5.94318px -5.35524px 0px, var(--Red) -5.22915px -6.05442px 0px, var(--Red) -4.43352px -6.65912px 0px, var(--Red) -3.5687px -7.15991px 0px, var(--Red) -2.6482px -7.54898px 0px, var(--Red) -1.68637px -7.82024px 0px, var(--Red) -0.698222px -7.96947px 0px, var(--Red) 0.300817px -7.99434px 0px, var(--Red) 1.29516px -7.89446px 0px, var(--Red) 2.2693px -7.67139px 0px, var(--Red) 3.20802px -7.32862px 0px, var(--Red) 4.09668px -6.87148px 0px, var(--Red) 4.92142px -6.30711px 0px, var(--Red) 5.66936px -5.64432px 0px, var(--Red) 6.32883px -4.89346px 0px, var(--Red) 6.88954px -4.06623px 0px, var(--Red) 7.34274px -3.17555px 0px, var(--Red) 7.68136px -2.23532px 0px, var(--Red) 7.90012px -1.26021px 0px, var(--Red) 7.9956px -0.265434px 0px;
}

.Choix_Haut .sectionJ2 h2,
.Choix_Haut .sectionJ2 h3 {
    text-shadow: var(--Blue) 8px 0px 0px, var(--Blue) 7.93758px 0.997398px 0px, var(--Blue) 7.7513px 1.97923px 0px, var(--Blue) 7.44406px 2.93018px 0px, var(--Blue) 7.02066px 3.8354px 0px, var(--Blue) 6.48771px 4.68078px 0px, var(--Blue) 5.85351px 5.45311px 0px, var(--Blue) 5.12797px 6.14035px 0px, var(--Blue) 4.32242px 6.73177px 0px, var(--Blue) 3.44941px 7.21814px 0px, var(--Blue) 2.52258px 7.59188px 0px, var(--Blue) 1.55638px 7.84714px 0px, var(--Blue) 0.565898px 7.97996px 0px, var(--Blue) -0.433417px 7.98825px 0px, var(--Blue) -1.42597px 7.87189px 0px, var(--Blue) -2.39627px 7.63269px 0px, var(--Blue) -3.32917px 7.27438px 0px, var(--Blue) -4.21013px 6.80256px 0px, var(--Blue) -5.02539px 6.22459px 0px, var(--Blue) -5.76223px 5.54948px 0px, var(--Blue) -6.40915px 4.78778px 0px, var(--Blue) -6.95606px 3.95136px 0px, var(--Blue) -7.39442px 3.05329px 0px, var(--Blue) -7.71739px 2.10757px 0px, var(--Blue) -7.91994px 1.12896px 0px, var(--Blue) -7.9989px 0.132735px 0px, var(--Blue) -7.95304px -0.865561px 0px, var(--Blue) -7.78307px -1.85035px 0px, var(--Blue) -7.49165px -2.80627px 0px, var(--Blue) -7.08333px -3.71839px 0px, var(--Blue) -6.56447px -4.57249px 0px, var(--Blue) -5.94318px -5.35524px 0px, var(--Blue) -5.22915px -6.05442px 0px, var(--Blue) -4.43352px -6.65912px 0px, var(--Blue) -3.5687px -7.15991px 0px, var(--Blue) -2.6482px -7.54898px 0px, var(--Blue) -1.68637px -7.82024px 0px, var(--Blue) -0.698222px -7.96947px 0px, var(--Blue) 0.300817px -7.99434px 0px, var(--Blue) 1.29516px -7.89446px 0px, var(--Blue) 2.2693px -7.67139px 0px, var(--Blue) 3.20802px -7.32862px 0px, var(--Blue) 4.09668px -6.87148px 0px, var(--Blue) 4.92142px -6.30711px 0px, var(--Blue) 5.66936px -5.64432px 0px, var(--Blue) 6.32883px -4.89346px 0px, var(--Blue) 6.88954px -4.06623px 0px, var(--Blue) 7.34274px -3.17555px 0px, var(--Blue) 7.68136px -2.23532px 0px, var(--Blue) 7.90012px -1.26021px 0px, var(--Blue) 7.9956px -0.265434px 0px;
}

.Choix_Haut .sectionJ1,
.Choix_Haut .sectionJ2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.Bloc_Nom_Cit {
    display: flex;
    gap: 20px;
    align-items: end;
}

.Bloc_Nom_Cit>h3 {
    text-wrap: nowrap;
}

.sectionJ1>.Bloc_Nom_Cit {
    text-align: left;
}

.sectionJ2>.Bloc_Nom_Cit {
    text-align: right;
    flex-direction: row-reverse;
}

.Choix_Bas {
    background: var(--Gris-Faible-Opa);
    backdrop-filter: blur(4px);
    text-align: center;
    padding: 20px;
}

.Lien {
    color: var(--Blanc-casse);
}

.ChoixPerso {
    display: grid;
    grid-template-columns: 1fr fit-content(100%) 1fr;
    justify-items: center;
    width: 100%;
    gap: 20px;

    grid-template-areas:
        "j1 f j2";
    align-items: end;
}

.ChoixPerso>.Start_Btn {
    grid-area: f;
}

.ChoixPerso>.GrillePerso {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

.ChoixPerso>.GPj1 {
    grid-area: j1;
}

.ChoixPerso>.GPj2 {
    grid-area: j2;
    justify-content: flex-end;
}

.GrillePerso>h2 {
    width: 100%;
}


/*? --- Carte Séléction  */

.SelectCards>input {
    display: none;
}

.SelectCards>label {
    display: grid;
    cursor: pointer;
    border-radius: var(--Radius-ext);
    width: fit-content;
    border: var(--Border-Int);
    outline: var(--Border-Out);
    font-size: var(--h4);
    overflow: hidden;
}

.SelectCards>label>.Sprite {
    display: none;
}

.SelectCards input:checked~label {
    outline: var(--Border-Out-Selected);
}

.SelectCards>label:hover {
    color: var(--Jaune);
    outline-color: var(--Jaune);
    transform: scale(1.05);
}

.SelectCards .Stats {
    width: 100px;
    height: 100px;
    display: flex;
    padding: 3px;
    flex-direction: column;
    background: var(--URL) center;
    background-size: cover;
}

.nbStats {
    display: flex;
    width: fit-content;
    gap: 3px;
    font-size: var(--micro);
    align-items: center;
    height: fit-content;
}

.nbStats>p {
    margin: 0px;
}

.nbStats>img {
    height: 14px;
    width: 14px;
}

.SelectCards label>p {
    margin: 0px;
    padding: 3px;
    height: 100%;
    width: 100%;
    text-align: center;
}

.Sj1>label>p {
    background: url(../asset/Texture1.svg) center;
}

.Sj1 input:checked~label {
    outline-color: var(--Red);
}

.Sj2>label>p {
    background: url(../asset/Texture2.svg) center;
}

.Sj2 input:checked~label {
    outline-color: var(--Blue);
}



.Sj1 input:disabled~label,
.Sj2 input:disabled~label {
    outline: none;
    cursor: not-allowed;
    opacity: 0.5;
}

.Sj1 input:disabled:hover~label,
.Sj2 input:disabled:hover~label {
    color: var(--Blanc-casse);
    outline-color: none;
}

.sectionJ1--NotSelect .Bloc_Stat,
.sectionJ1--NotSelect .Bloc_Nom_Cit,
.sectionJ2--NotSelect .Bloc_Stat,
.sectionJ2--NotSelect .Bloc_Nom_Cit,
.spriteJ1--NotSelect,
.spriteJ2--NotSelect {
    opacity: 0;
}


/*? --- Vue Combat  */

.Combat_main {
    display: grid;
    grid-template-rows: 1fr fit-content(100%);

    height: 100vh;
    /* width: 100vw; */
}

.Combat__Header {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 30px;
    height: fit-content;
    align-items: flex-start;
}

.Combat__Header :nth-child(1) {
    grid-template-columns: fit-content(100%) min-content 1fr;
    grid-template-areas:
        "img pv pv"
        "img name stats";
    text-align: right;
}

.Combat__Header :nth-child(1) .PvBar {
    transform: scale(-1, 1);
}

.Combat__Header :nth-child(1) .Bloc_Stat {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.Combat__Header .VS {
    margin: 5px 0px;
}

.CombatHeader__PVandINFO {
    display: grid;
    grid-template-columns: 1fr min-content fit-content(100%);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
        "pv pv img"
        "stats name img";
    gap: 10px;
    align-items: end;
}

.CombatHeader__PVandINFO > .Bloc_Stat {
    grid-area: stats;

    display: flex;
    gap: 10px;
}

.CombatHeader__PVandINFO > .Bloc_Stat > .nbStats {
    font-size: var(--h4);
}

.CombatHeader__IMG {
    grid-area: img;
    height: 100px;
    width: 100px;
    object-fit: cover;
    border-radius: var(--Radius-ext);
    border: var(--Border-Int);
    outline: var(--Border-Out);
}

.Combat__Header :nth-child(1) .CombatHeader__IMG {
    outline-color: var(--Red);
}

.Combat__Header :nth-child(3) .CombatHeader__IMG {
    outline-color: var(--Blue);
}

.CombatHeader__Name {
    grid-area: name;
    font-size: var(--h3);

    margin: auto 10px;

}

.Combat__Header :nth-child(1) .CombatHeader__Name {
    text-shadow: var(--Red) 4px 0px 0px, var(--Red) 3.87565px 0.989616px 0px, var(--Red) 3.51033px 1.9177px 0px, var(--Red) 2.92676px 2.72656px 0px, var(--Red) 2.16121px 3.36588px 0px, var(--Red) 1.26129px 3.79594px 0px, var(--Red) 0.282949px 3.98998px 0px, var(--Red) -0.712984px 3.93594px 0px, var(--Red) -1.66459px 3.63719px 0px, var(--Red) -2.51269px 3.11229px 0px, var(--Red) -3.20457px 2.39389px 0px, var(--Red) -3.69721px 1.52664px 0px, var(--Red) -3.95997px 0.56448px 0px, var(--Red) -3.97652px -0.432781px 0px, var(--Red) -3.74583px -1.40313px 0px, var(--Red) -3.28224px -2.28625px 0px, var(--Red) -2.61457px -3.02721px 0px, var(--Red) -1.78435px -3.57996px 0px, var(--Red) -0.843183px -3.91012px 0px, var(--Red) 0.150409px -3.99717px 0px, var(--Red) 1.13465px -3.8357px 0px, var(--Red) 2.04834px -3.43574px 0px, var(--Red) 2.83468px -2.82216px 0px, var(--Red) 3.44477px -2.03312px 0px, var(--Red) 3.84068px -1.11766px 0px, var(--Red) 3.9978px -0.132717px 0px;
}

.Combat__Header :nth-child(3) .CombatHeader__Name {
    text-shadow: var(--Blue) 4px 0px 0px, var(--Blue) 3.87565px 0.989616px 0px, var(--Blue) 3.51033px 1.9177px 0px, var(--Blue) 2.92676px 2.72656px 0px, var(--Blue) 2.16121px 3.36588px 0px, var(--Blue) 1.26129px 3.79594px 0px, var(--Blue) 0.282949px 3.98998px 0px, var(--Blue) -0.712984px 3.93594px 0px, var(--Blue) -1.66459px 3.63719px 0px, var(--Blue) -2.51269px 3.11229px 0px, var(--Blue) -3.20457px 2.39389px 0px, var(--Blue) -3.69721px 1.52664px 0px, var(--Blue) -3.95997px 0.56448px 0px, var(--Blue) -3.97652px -0.432781px 0px, var(--Blue) -3.74583px -1.40313px 0px, var(--Blue) -3.28224px -2.28625px 0px, var(--Blue) -2.61457px -3.02721px 0px, var(--Blue) -1.78435px -3.57996px 0px, var(--Blue) -0.843183px -3.91012px 0px, var(--Blue) 0.150409px -3.99717px 0px, var(--Blue) 1.13465px -3.8357px 0px, var(--Blue) 2.04834px -3.43574px 0px, var(--Blue) 2.83468px -2.82216px 0px, var(--Blue) 3.44477px -2.03312px 0px, var(--Blue) 3.84068px -1.11766px 0px, var(--Blue) 3.9978px -0.132717px 0px;

}

.Combat_SectAct {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "j1 i j2";
    justify-items: center;

    background: var(--Gris-Faible-Opa);
    backdrop-filter: blur(4px);
    text-align: center;
    padding: 20px;
}

.Combat_SectAct form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    height: fit-content;
}

.Action {
    grid-area: i;
    height: 100%;
    overflow-y: scroll;
    width: 100%;
    height: 150px;
    color: var(--Blanc-casse);
    background-color: var(--Gris-Faible-Opa);
    border-radius: var(--Radius-ext);
    border: var(--Border-Int);
    outline: var(--Border-Out);
}

.Form_Action_j1 {
    grid-area: j1;
}

.Form_Action_j2 {
    grid-area: j2;
}


.btn_Action {
    display: block;
    padding: 10px 30px;
    border-radius: var(--Radius-ext);
    margin: 10px;
    border: var(--Border-Int);
    outline: var(--Border-Out);
    width: fit-content;
    background: url(../asset/Texture1.svg) center;
    text-decoration: none;

    font-size: 1.563rem;
    font-family: 'GamePaused', sans-serif;
    color: var(--Blanc-casse);
    text-shadow: var(--Gris-sombre) 2px 0px 0px, var(--Gris-sombre) 1.75517px 0.958851px 0px, var(--Gris-sombre) 1.0806px 1.68294px 0px, var(--Gris-sombre) 0.141474px 1.99499px 0px, var(--Gris-sombre) -0.832294px 1.81859px 0px, var(--Gris-sombre) -1.60229px 1.19694px 0px, var(--Gris-sombre) -1.97998px 0.28224px 0px, var(--Gris-sombre) -1.87291px -0.701566px 0px, var(--Gris-sombre) -1.30729px -1.5136px 0px, var(--Gris-sombre) -0.421592px -1.95506px 0px, var(--Gris-sombre) 0.567324px -1.91785px 0px, var(--Gris-sombre) 1.41734px -1.41108px 0px, var(--Gris-sombre) 1.92034px -0.558831px 0px;

    width: 186px;
    text-align: center;
}

.BtnAtk {
    background: url(../asset/Texture1.svg) center;
}

.BtnCap1 {
    background: url(../asset/Texture2.svg) center;
}


.BtnCap2 {
    background: url(../asset/Texture3.svg) center;
}


.BtnSoi {
    background: url(../asset/Texture4.svg) center;
}

.Info__Container {
    display: block;
    height: 0px;
    width: 0px;
}

.btn_Action_Not {
    position: relative;
    display: none;
    width: 100px;
    top: -87px;
    left: -30px;
    background: var(--Gris-Faible-Opa);
    border-radius: var(--Radius-ext);
    color: var(--Blanc-casse);
    border: var(--Border-Int);
    outline: var(--Border-Out);
    z-index: 1;
}

.btn_Action_Not__Container .btn_Action:hover ~ .Info__Container .btn_Action_Not {
    display: inline-block;
}

.btn_Action_Not__Container .btn_Action {
    cursor: not-allowed;
}

.PvBar {
    display: block;
    grid-area: pv;
    height: 30px;
    width: 500px;
    background-color: #C1BDA1;
    border-radius: 0px 4px 20px 0px;
    border: var(--Border-Int);
    outline: var(--Border-Out);
    overflow: hidden;
}

.PvBar::after {
    display: block;
    content: "";
    height: 100%;
    width: var(--Pv);
    background: url(../asset/Texture3.svg) center;
    margin: 0px;
    text-align: left;
}


/*? --- Page Fin de partie  */

.FinCombat_main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
}

.FinCombat__Titre {
    font-size: var(--BIG);
    color: var(--Blanc-casse);
    text-shadow: var(--Violet) 8px 0px 0px, var(--Violet) 7.93758px 0.997398px 0px, var(--Violet) 7.7513px 1.97923px 0px, var(--Violet) 7.44406px 2.93018px 0px, var(--Violet) 7.02066px 3.8354px 0px, var(--Violet) 6.48771px 4.68078px 0px, var(--Violet) 5.85351px 5.45311px 0px, var(--Violet) 5.12797px 6.14035px 0px, var(--Violet) 4.32242px 6.73177px 0px, var(--Violet) 3.44941px 7.21814px 0px, var(--Violet) 2.52258px 7.59188px 0px, var(--Violet) 1.55638px 7.84714px 0px, var(--Violet) 0.565898px 7.97996px 0px, var(--Violet) -0.433417px 7.98825px 0px, var(--Violet) -1.42597px 7.87189px 0px, var(--Violet) -2.39627px 7.63269px 0px, var(--Violet) -3.32917px 7.27438px 0px, var(--Violet) -4.21013px 6.80256px 0px, var(--Violet) -5.02539px 6.22459px 0px, var(--Violet) -5.76223px 5.54948px 0px, var(--Violet) -6.40915px 4.78778px 0px, var(--Violet) -6.95606px 3.95136px 0px, var(--Violet) -7.39442px 3.05329px 0px, var(--Violet) -7.71739px 2.10757px 0px, var(--Violet) -7.91994px 1.12896px 0px, var(--Violet) -7.9989px 0.132735px 0px, var(--Violet) -7.95304px -0.865561px 0px, var(--Violet) -7.78307px -1.85035px 0px, var(--Violet) -7.49165px -2.80627px 0px, var(--Violet) -7.08333px -3.71839px 0px, var(--Violet) -6.56447px -4.57249px 0px, var(--Violet) -5.94318px -5.35524px 0px, var(--Violet) -5.22915px -6.05442px 0px, var(--Violet) -4.43352px -6.65912px 0px, var(--Violet) -3.5687px -7.15991px 0px, var(--Violet) -2.6482px -7.54898px 0px, var(--Violet) -1.68637px -7.82024px 0px, var(--Violet) -0.698222px -7.96947px 0px, var(--Violet) 0.300817px -7.99434px 0px, var(--Violet) 1.29516px -7.89446px 0px, var(--Violet) 2.2693px -7.67139px 0px, var(--Violet) 3.20802px -7.32862px 0px, var(--Violet) 4.09668px -6.87148px 0px, var(--Violet) 4.92142px -6.30711px 0px, var(--Violet) 5.66936px -5.64432px 0px, var(--Violet) 6.32883px -4.89346px 0px, var(--Violet) 6.88954px -4.06623px 0px, var(--Violet) 7.34274px -3.17555px 0px, var(--Violet) 7.68136px -2.23532px 0px, var(--Violet) 7.90012px -1.26021px 0px, var(--Violet) 7.9956px -0.265434px 0px;
}

.FinCombat__JoueurContainer {
    display: flex;
    align-items: center;
    gap : 20px;
}

.FinCombat__Gagnant, .FinCombat__Perdant {
    background: var(--URL) center;
    background-size: cover;
    border-radius: var(--Radius-ext);
    border: var(--Border-Int);
    outline: var(--Border-Out);
}

.FinCombat__Gagnant {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 500px;
    width: 430px;
}

.FinCombat__Perdant {
    width: 150px;
    height: 190px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.FinCombat__ContainerLoser {
    position: absolute;
    right: 30vw;
    top: 50vh;
    height: fit-content;
    width: fit-content;
}

.FinCombat__KO {
    position: relative;
    top: -225px;
    right: -80%;
    font-size: var(--BIG);
    color: var(--Blanc-casse);
    text-transform: uppercase;
    margin: 0px;
    text-shadow: var(--Ecarlate) 8px 0px 0px, var(--Ecarlate) 7.93758px 0.997398px 0px, var(--Ecarlate) 7.7513px 1.97923px 0px, var(--Ecarlate) 7.44406px 2.93018px 0px, var(--Ecarlate) 7.02066px 3.8354px 0px, var(--Ecarlate) 6.48771px 4.68078px 0px, var(--Ecarlate) 5.85351px 5.45311px 0px, var(--Ecarlate) 5.12797px 6.14035px 0px, var(--Ecarlate) 4.32242px 6.73177px 0px, var(--Ecarlate) 3.44941px 7.21814px 0px, var(--Ecarlate) 2.52258px 7.59188px 0px, var(--Ecarlate) 1.55638px 7.84714px 0px, var(--Ecarlate) 0.565898px 7.97996px 0px, var(--Ecarlate) -0.433417px 7.98825px 0px, var(--Ecarlate) -1.42597px 7.87189px 0px, var(--Ecarlate) -2.39627px 7.63269px 0px, var(--Ecarlate) -3.32917px 7.27438px 0px, var(--Ecarlate) -4.21013px 6.80256px 0px, var(--Ecarlate) -5.02539px 6.22459px 0px, var(--Ecarlate) -5.76223px 5.54948px 0px, var(--Ecarlate) -6.40915px 4.78778px 0px, var(--Ecarlate) -6.95606px 3.95136px 0px, var(--Ecarlate) -7.39442px 3.05329px 0px, var(--Ecarlate) -7.71739px 2.10757px 0px, var(--Ecarlate) -7.91994px 1.12896px 0px, var(--Ecarlate) -7.9989px 0.132735px 0px, var(--Ecarlate) -7.95304px -0.865561px 0px, var(--Ecarlate) -7.78307px -1.85035px 0px, var(--Ecarlate) -7.49165px -2.80627px 0px, var(--Ecarlate) -7.08333px -3.71839px 0px, var(--Ecarlate) -6.56447px -4.57249px 0px, var(--Ecarlate) -5.94318px -5.35524px 0px, var(--Ecarlate) -5.22915px -6.05442px 0px, var(--Ecarlate) -4.43352px -6.65912px 0px, var(--Ecarlate) -3.5687px -7.15991px 0px, var(--Ecarlate) -2.6482px -7.54898px 0px, var(--Ecarlate) -1.68637px -7.82024px 0px, var(--Ecarlate) -0.698222px -7.96947px 0px, var(--Ecarlate) 0.300817px -7.99434px 0px, var(--Ecarlate) 1.29516px -7.89446px 0px, var(--Ecarlate) 2.2693px -7.67139px 0px, var(--Ecarlate) 3.20802px -7.32862px 0px, var(--Ecarlate) 4.09668px -6.87148px 0px, var(--Ecarlate) 4.92142px -6.30711px 0px, var(--Ecarlate) 5.66936px -5.64432px 0px, var(--Ecarlate) 6.32883px -4.89346px 0px, var(--Ecarlate) 6.88954px -4.06623px 0px, var(--Ecarlate) 7.34274px -3.17555px 0px, var(--Ecarlate) 7.68136px -2.23532px 0px, var(--Ecarlate) 7.90012px -1.26021px 0px, var(--Ecarlate) 7.9956px -0.265434px 0px;
}

.FinCombat__Joueur {
    position: relative;
    font-size: var(--BIG);
    color: var(--Blanc-casse);
    text-transform: uppercase;
    margin: 0px;
}

.FinCombat__Joueur--Winner {
    top: -50%;
    left: -50%;
}

.FinCombat__Joueur--Loser {
    right: -85%;
    top: -150px;
}

.FinCombat__Cri {
    position: relative;
    bottom: -40px;
    font-size: var(--h4);
    color: var(--Blanc-casse);
    text-transform: uppercase;
}

.FinCombat__Nom {
    color: var(--Blanc-casse);
}

.FinCombat__Nom--Winner {
    position: relative;
    bottom: -7%;
    font-size: var(--BIG);
    text-transform: uppercase;
    margin: 0px;
    z-index: 1;
}

.FinCombat__Nom--Loser {
    height: 40px;
    margin: 0px;
    padding: 10px;
    text-align: center;
}

.FinCombat__Nom--LoserJ1 {
    background: url(../asset/Texture1.svg) center;
}

.FinCombat__Nom--LoserJ2 {
    background: url(../asset/Texture2.svg) center;
}

.FinCombat__SpriteLoser {
    height: 150px;
    width: 150px;
    object-fit: cover;
}

.FinCombat--J1 {
    outline-color: var(--Red);
}

.FinCombat--J2 {
    outline-color: var(--Blue);
}









/*? --- Tableau Admin */

.Admin {
    margin: 20px;
    padding: 20px;
    display: grid;
    gap: 20px;
    background: var(--Gris-Faible-Opa);
    backdrop-filter: blur(4px);
}

.Admin .Tabl_Sprite {
    height: 100px;
    width: 100px;
    object-fit: cover;
}

.Admin table {
    width: 100%;
    border-collapse: collapse;
    color: var(--Gris-sombre);
    background-color: var(--Blanc-casse);
}

.Admin table th,
.Admin table td {
    border: 1px solid var(--Gris-sombre);
}