/* ========================================
   TAROTREF-TEST.CSS
   Positionnement des cartes + Style Premium
   ======================================== */

/* Variables Premium */
:root {
    --gold: #c9a227;
    --gold-light: #e8d48a;
    --deep-purple: #1a0a2e;
    --purple-mid: #2d1b4e;
    --cream: #f5f0e6;
}

/* Images des arcanes */
.rond {
    border-radius: 50%;
    border: 3px solid var(--gold) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(201, 162, 39, 0.2);
    transition: all 0.3s ease;
}

.rond:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(201, 162, 39, 0.4);
    z-index: 100;
}

/* Zone du schéma */
.fond {
    border-radius: 15px;
    padding: 20px;
}

/* ========================================
   POSITIONNEMENT DES CARTES - RESPONSIVE
   ======================================== */

/* ----------------------------------------
   min-width: 400px - rond 75px
   ---------------------------------------- */
@media (min-width: 400px) {
    #blasonb2, #chs, #guerisonb2, #transformationb2, #voiedunordb2 {
        position: absolute;
        width: 75px;
    }
    
    #mav2 {
        position: absolute;
        right: 0%;
        top: 55%;
    }
    
    #mineur {
        position: absolute;
        right: 0%;
        top: 70%;
		width: 45px;
    }
    
    #reve2 {
        position: absolute;
        right: 25%;
        top: 110%;
    }
    
    #fluctuant2 {
        position: absolute;
        right: 40%;
        top: 110%;
    }
    
    #transformationb2 {
        top: 25%;
        right: 46%;
    }
    
    #empreinte2 {
        position: absolute;
        top: 110%;
        right: 85%;
    }
    
    #voiedunord2 {
        position: absolute;
        right: 70%;
        top: 110%;
    }
    
    #voiedunordb2 {
        right: 66%;
        top: 104%;
    }
    
    #voiedusud2 {
        position: absolute;
        right: 55%;
        top: 110%;
    }
    
    #blasonb2 {
        top: 13%;
        right: 37%;
    }
    
    #blason2 {
        position: absolute;
        top: 11%;
        right: 19%;
    }
    #transformations2 {
        position: absolute;
        top: 30%;
        right: 31.5%;
    }
    
    #experiences2 {
        position: absolute;
        top: 57.5%;
        right: 31.5%;
    }
    
    #defis2 {
        position: absolute;
        right: 59%;
        top: 57.5%;
    }
    
    #ressources2 {
        position: absolute;
        top: 30%;
        right: 58.5%;
    }
    
    #soi2 {
        position: absolute;
        top: 44.5%;
        right: 77%;
    }
    
    #chpm2 {
        position: absolute;
        top: 44%;
        right: 63.5%;
    }
    
    #noeud2 {
        position: absolute;
        right: 45.5%;
        top: 75%;
    }
    
        #chpan2 {
        position: absolute;
        right: 45.5%;
        top: 62%;
    }
    
        #passage2 {
        position: absolute;
        right: 34.9%;
        top: 43.6%;
        width: 82px;
    }
    #guerisonb2 {
        right: 56%;
        top: 0;
    }
    
    #guerison2 {
        position: absolute;
        right: 45.5%;
        top: 10%;
    }
    
    #chpj2 {
        position: absolute;
        top: 25%;
        right: 45.5%;
    }
    
    #chp {
        position: absolute;
        top: 44%;
        right: 25.5%;
    }
    
    #chs {
        top: 39%;
        right: 42%;
    }
}

/* ----------------------------------------
   min-width: 500px - rond 80px
   ---------------------------------------- */
@media (min-width: 500px) {
    #blasonb2, #chs, #guerisonb2, #transformationb2, #voiedunordb2 {
        position: absolute;
        width: 80px;
    }
    
    #mav2 {
        position: absolute;
        right: 0%;
        top: 55%;
    }
    
    #mineur {
        position: absolute;
        right: 0%;
        top: 70%;
    }
    
    #reve2 {
        position: absolute;
        right: 25%;
        top: 110%;
    }
    
    #fluctuant2 {
        position: absolute;
        right: 40%;
        top: 110%;
    }
    
    #transformationb2 {
        top: 25%;
        right: 46%;
    }
    
    #empreinte2 {
        position: absolute;
        top: 110%;
        right: 85%;
    }
    
    #voiedunord2 {
        position: absolute;
        right: 70%;
        top: 110%;
    }
    
    #voiedunordb2 {
        right: 66%;
        top: 104%;
    }
    
    #voiedusud2 {
        position: absolute;
        right: 55%;
        top: 110%;
    }
    
    #blasonb2 {
        top: 13%;
        right: 37%;
    }
    
    #blason2 {
        position: absolute;
        top: 8%;
        right: 19%;
    }
    
    #transformations2 {
        position: absolute;
        top: 30%;
        right: 31.5%;
    }
    
    #experiences2 {
        position: absolute;
        top: 57.5%;
        right: 31.5%;
    }
    
    #defis2 {
        position: absolute;
        right: 59%;
        top: 57.5%;
    }
    
    #ressources2 {
        position: absolute;
        top: 30%;
        right: 58.5%;
    }
    
    #soi2 {
        position: absolute;
        top: 44.5%;
        right: 77%;
    }
    
    #chpm2 {
        position: absolute;
        top: 44.5%;
        right: 64.5%;
    }
    
    #noeud2 {
        position: absolute;
        right: 45.5%;
        top: 80%;
    }
    
    #chpan2 {
        position: absolute;
        right: 45.5%;
        top: 64%;
    }
    
    #passage2 {
        position: absolute;
        right: 44.7%;
        top: 44.5%;
        width: 88px;
    }
    
    #guerisonb2 {
        right: 56%;
        top: 0;
    }
    
    #guerison2 {
        position: absolute;
        right: 45.5%;
        top: 9%;
    }
    
    #chpj2 {
        position: absolute;
        top: 24%;
        right: 45.5%;
    }
    
    #chp {
        position: absolute;
        top: 44%;
        right: 25.5%;
    }
    
    #chs {
        top: 39%;
        right: 42%;
    }
}

/* ----------------------------------------
   min-width: 600px - rond 85px
   ---------------------------------------- */
@media (min-width: 600px) {
    #blasonb2, #chs, #guerisonb2, #transformationb2, #voiedunordb2 {
        position: absolute;
        width: 85px;
    }
    
    #mav2 {
        position: absolute;
        right: 0%;
        top: 55%;
    }
    
    #mineur {
        position: absolute;
        right: 0%;
        top: 70%;
		width: 65px;
    }
    
    #reve2 {
        position: absolute;
        right: 25%;
        top: 110%;
    }
    
    #fluctuant2 {
        position: absolute;
        right: 40%;
        top: 110%;
    }
    
    #transformationb2 {
        top: 25%;
        right: 46%;
    }
    
    #empreinte2 {
        position: absolute;
        top: 110%;
        right: 85%;
    }
    
    #voiedunord2 {
        position: absolute;
        right: 70%;
        top: 110%;
    }
    
    #voiedunordb2 {
        right: 66%;
        top: 104%;
    }
    
    #voiedusud2 {
        position: absolute;
        right: 55%;
        top: 110%;
    }
    
    #blasonb2 {
        top: 13%;
        right: 37%;
    }
    
    #blason2 {
        position: absolute;
        top: 8%;
        right: 19%;
    }
    
    #transformations2 {
        position: absolute;
        top: 30%;
        right: 31.5%;
    }
    
    #experiences2 {
        position: absolute;
        top: 57.5%;
        right: 31.5%;
    }
    
    #defis2 {
        position: absolute;
        right: 59%;
        top: 57.5%;
    }
    
    #ressources2 {
        position: absolute;
        top: 30%;
        right: 58.5%;
    }
    
        #soi2 {
        position: absolute;
        top: 43.5%;
        right: 77%;
    }
    
        #chpm2 {
        position: absolute;
        top: 43.5%;
        right: 62.5%;
    }
    
    #noeud2 {
        position: absolute;
        right: 45%;
        top: 76%;
    }
    
    #chpan2 {
        position: absolute;
        right: 45%;
        top: 62%;
    }
    
        #passage2 {
        position: absolute;
        right: 38.7%;
        top: 43.2%;
        width: 93px;
    }
    
    #guerisonb2 {
        right: 56%;
        top: 0;
    }
    
    #guerison2 {
        position: absolute;
        right: 45.5%;
        top: 9%;
    }
    
    #chpj2 {
        position: absolute;
        top: 24%;
        right: 45.5%;
    }
    
        #chp {
        position: absolute;
        top: 43.5%;
        right: 25.5%;
    }
    
    #chs {
        top: 39%;
        right: 42%;
    }
}

/* ----------------------------------------
   min-width: 767px - rond 90px
   ---------------------------------------- */
@media (min-width: 767px) {
    #blasonb2, #chs, #guerisonb2, #transformationb2, #voiedunordb2 {
        position: absolute;
        width: 90px;
    }
    
    #mav2 {
        position: absolute;
        right: 0%;
        top: 55%;
    }
    
    #mineur {
        position: absolute;
        right: 0%;
        top: 70%;
		width: 75px;
    }
    
    #reve2 {
        position: absolute;
        right: 25%;
        top: 110%;
    }
    
    #fluctuant2 {
        position: absolute;
        right: 40%;
        top: 110%;
    }
    
    #transformationb2 {
        top: 25%;
        right: 46%;
    }
    
    #empreinte2 {
        position: absolute;
        top: 110%;
        right: 85%;
    }
    
    #voiedunord2 {
        position: absolute;
        right: 70%;
        top: 110%;
    }
    
    #voiedunordb2 {
        right: 66%;
        top: 104%;
    }
    
    #voiedusud2 {
        position: absolute;
        right: 55%;
        top: 110%;
    }
    
    #blasonb2 {
        top: 13%;
        right: 37%;
    }
    
    #blason2 {
        position: absolute;
        top: 8%;
        right: 19%;
    }
    
    #transformations2 {
        position: absolute;
        top: 30%;
        right: 31.5%;
    }
    
    #experiences2 {
        position: absolute;
        top: 57.5%;
        right: 31.5%;
    }
    
    #defis2 {
        position: absolute;
        right: 59%;
        top: 57.5%;
    }
    
    #ressources2 {
        position: absolute;
        top: 30%;
        right: 58.5%;
    }
    
    #soi2 {
        position: absolute;
        top: 44.5%;
        right: 77%;
    }
    
    #chpm2 {
        position: absolute;
        top: 44.5%;
        right: 64.5%;
    }
    
    #noeud2 {
        position: absolute;
        right: 45.5%;
        top: 77%;
    }
    
    #chpan2 {
        position: absolute;
        right: 45.5%;
        top: 64%;
    }
    
    #passage2 {
        position: absolute;
        right: 42%;
        top: 44%;
        width: 99px;
    }
    
    #guerisonb2 {
        right: 56%;
        top: 0;
    }
    
    #guerison2 {
        position: absolute;
        right: 45.5%;
        top: 9%;
    }
    
    #chpj2 {
        position: absolute;
        top: 24%;
        right: 45.5%;
    }
    
    #chp {
        position: absolute;
        top: 44%;
        right: 25.5%;
    }
    
    #chs {
        top: 39%;
        right: 42%;
    }
}

/* ----------------------------------------
   min-width: 991px - rond 95px
   ---------------------------------------- */
@media (min-width: 991px) {
    #blasonb2, #chs, #guerisonb2, #transformationb2, #voiedunordb2 {
        position: absolute;
        width: 95px;
    }
    
    #mav2 {
        position: absolute;
        right: 0%;
        top: 55%;
    }
    
    #mineur {
        position: absolute;
        right: 0%;
        top: 70%;
    }
    
    #reve2 {
        position: absolute;
        right: 25%;
        top: 110%;
    }
    
    #fluctuant2 {
        position: absolute;
        right: 40%;
        top: 110%;
    }
    
    #transformationb2 {
        top: 25%;
        right: 46%;
    }
    
    #empreinte2 {
        position: absolute;
        top: 110%;
        right: 85%;
    }
    
    #voiedunord2 {
        position: absolute;
        right: 70%;
        top: 110%;
    }
    
    #voiedunordb2 {
        right: 66%;
        top: 104%;
    }
    
    #voiedusud2 {
        position: absolute;
        right: 55%;
        top: 110%;
    }
    
    #blasonb2 {
        top: 13%;
        right: 37%;
    }
    
    #blason2 {
        position: absolute;
        top: 8%;
        right: 19%;
    }
    
    #transformations2 {
        position: absolute;
        top: 30%;
        right: 31.5%;
    }
    
    #experiences2 {
        position: absolute;
        top: 57.5%;
        right: 31.5%;
    }
    
    #defis2 {
        position: absolute;
        right: 59%;
        top: 57.5%;
    }
    
    #ressources2 {
        position: absolute;
        top: 30%;
        right: 58.5%;
    }
    
    #soi2 {
        position: absolute;
        top: 44.5%;
        right: 77%;
    }
    
    #chpm2 {
        position: absolute;
        top: 44.5%;
        right: 64.5%;
    }
    
    #noeud2 {
        position: absolute;
        right: 45.5%;
        top: 80%;
    }
    
    #chpan2 {
        position: absolute;
        right: 45.5%;
        top: 64%;
    }
    
    #passage2 {
        position: absolute;
        right: 44.7%;
        top: 44.5%;
        width: 104px;
    }
    
    #guerisonb2 {
        right: 56%;
        top: 0;
    }
    
    #guerison2 {
        position: absolute;
        right: 45.5%;
        top: 9%;
    }
    
    #chpj2 {
        position: absolute;
        top: 24%;
        right: 45.5%;
    }
    
    #chp {
        position: absolute;
        top: 44%;
        right: 25.5%;
    }
    
    #chs {
        top: 39%;
        right: 42%;
    }
}

/* ----------------------------------------
   min-width: 1024px - rond 95px
   ---------------------------------------- */
@media (min-width: 1024px) {
    #blasonb2, #chs, #guerisonb2, #transformationb2, #voiedunordb2 {
        position: absolute;
        width: 95px;
    }
    
    #mav2 {
        position: absolute;
        right: 0%;
        top: 55%;
    }
    
    #mineur {
        position: absolute;
        right: 0%;
        top: 70%;
    }
    
    #reve2 {
        position: absolute;
        right: 25%;
        top: 110%;
    }
    
    #fluctuant2 {
        position: absolute;
        right: 40%;
        top: 110%;
    }
    
    #transformationb2 {
        top: 25%;
        right: 46%;
    }
    
    #empreinte2 {
        position: absolute;
        top: 110%;
        right: 85%;
    }
    
    #voiedunord2 {
        position: absolute;
        right: 70%;
        top: 110%;
    }
    
    #voiedunordb2 {
        right: 66%;
        top: 104%;
    }
    
    #voiedusud2 {
        position: absolute;
        right: 55%;
        top: 110%;
    }
    
    #blasonb2 {
        top: 13%;
        right: 37%;
    }
    
    #blason2 {
        position: absolute;
        top: 8%;
        right: 19%;
    }
    
    #transformations2 {
        position: absolute;
        top: 30%;
        right: 31.5%;
    }
    
    #experiences2 {
        position: absolute;
        top: 57.5%;
        right: 31.5%;
    }
    
    #defis2 {
        position: absolute;
        right: 59%;
        top: 57.5%;
    }
    
    #ressources2 {
        position: absolute;
        top: 30%;
        right: 58.5%;
    }
    
    #soi2 {
        position: absolute;
        top: 44.5%;
        right: 77%;
    }
    
    #chpm2 {
        position: absolute;
        top: 44.5%;
        right: 64.5%;
    }
    
    #noeud2 {
        position: absolute;
        right: 45.5%;
        top: 80%;
    }
    
    #chpan2 {
        position: absolute;
        right: 45.5%;
        top: 64%;
    }
    
    #passage2 {
        position: absolute;
        right: 44.7%;
        top: 44.5%;
        width: 104px;
    }
    
    #guerisonb2 {
        right: 56%;
        top: 0;
    }
    
    #guerison2 {
        position: absolute;
        right: 45.5%;
        top: 9%;
    }
    
    #chpj2 {
        position: absolute;
        top: 24%;
        right: 45.5%;
    }
    
    #chp {
        position: absolute;
        top: 44%;
        right: 25.5%;
    }
    
    #chs {
        top: 39%;
        right: 42%;
    }
}

/* ----------------------------------------
   min-width: 1200px - rond 100px (référence)
   ---------------------------------------- */
@media (min-width: 1200px) {
    #blasonb2, #chs, #guerisonb2, #transformationb2, #voiedunordb2 {
        position: absolute;
        width: 100px;
    }
    
    #mav2 {
        position: absolute;
        right: 0%;
        top: 55%;
    }
    
    #mineur {
        position: absolute;
        right: 0%;
        top: 70%;
    }
    
    #reve2 {
        position: absolute;
        right: 25%;
        top: 110%;
    }
    
    #fluctuant2 {
        position: absolute;
        right: 40%;
        top: 110%;
    }
    
    #transformationb2 {
        top: 25%;
        right: 46%;
    }
    
    #empreinte2 {
        position: absolute;
        top: 110%;
        right: 85%;
    }
    
    #voiedunord2 {
        position: absolute;
        right: 70%;
        top: 110%;
    }
    
    #voiedunordb2 {
        right: 66%;
        top: 104%;
    }
    
    #voiedusud2 {
        position: absolute;
        right: 55%;
        top: 110%;
    }
    
    #blasonb2 {
        top: 13%;
        right: 37%;
    }
    
    #blason2 {
        position: absolute;
        top: 8%;
        right: 19%;
    }
    
    #transformations2 {
        position: absolute;
        top: 30%;
        right: 31.5%;
    }
    
    #experiences2 {
        position: absolute;
        top: 57.5%;
        right: 31.5%;
    }
    
    #defis2 {
        position: absolute;
        right: 59%;
        top: 57.5%;
    }
    
    #ressources2 {
        position: absolute;
        top: 30%;
        right: 58.5%;
    }
    
    #soi2 {
        position: absolute;
        top: 44.5%;
        right: 77%;
    }
    
    #chpm2 {
        position: absolute;
        top: 44.5%;
        right: 64.5%;
    }
    
    #noeud2 {
        position: absolute;
        right: 45.5%;
        top: 80%;
    }
    
    #chpan2 {
        position: absolute;
        right: 45.5%;
        top: 64%;
    }
    
    #passage2 {
        position: absolute;
        right: 44.7%;
        top: 44.5%;
        width: 110px;
    }
    
    #guerisonb2 {
        right: 56%;
        top: 0;
    }
    
    #guerison2 {
        position: absolute;
        right: 45.5%;
        top: 9%;
    }
    
    #chpj2 {
        position: absolute;
        top: 24%;
        right: 45.5%;
    }
    
    #chp {
        position: absolute;
        top: 44%;
        right: 25.5%;
    }
    
    #chs {
        top: 39%;
        right: 42%;
    }
}