.card * {
    box-sizing: border-box;
}



.card {
    /* Geometry */
    width:2.5in;
    height:3.5in;
    
    /* Card cut */
    border-radius:.06in;
    overflow: hidden;

    /* Font */
    font-size:9pt;
    color:black;
 }

.card>.content {
    /* Geometry */
    position: relative;
    top:-3mm;
    left:-3mm;
    width:calc(2.5in + 6mm);
    height:calc(3.5in + 6mm);
}

.card>.content:before {
       /* Frame Display */
    display: block;
    content:'';

    /* Frame Geometry */
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: 1;


    /* Frame */
    background-image: url('../img/frames-std/content.png');
    background-size: 100% 100%;


}

/******************************/
/*           ILLU             */
/******************************/

.card>.content>.illu {
    /* Geometry */
    position: relative;
    top:0;
    left:0;
    width:calc(2.5in + 6mm);
    height:calc(3.5in + 6mm);
    z-index: 0;
    background: white;
}

.card>.content>.illu>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(50%) brightness(90%) sepia(100%) hue-rotate(170deg) grayscale(100%);

}

/******************************/
/*          HEADER            */
/******************************/

.card>.content>.header {
    /* Geometry */
    position: absolute;
    top:calc(3mm + 0.2in);
    left:calc(3mm + 0.2in);
    height:0.292in;
    width:2.1in;
    z-index: 1;

}

.card>.content>.header:before{
    /* Frame Display */
    display: block;
    content:'';

    /* Frame Geometry */
    position: absolute;
    top:-0.024in;
    left:-0.024in;
    width: 2.149in; /* Update with new files */
    height: 0.319in;

    /* Frame */
    background-image: url('../img/frames-std/title.png');
    background-size: 100% 100%;
}


.card[data-type=Attaque]>.content>.header:before{
    /* Frame */
    background-image: url('../img/frames-std/title-att.png');
}
.card[data-type=Défense]>.content>.header:before{
    /* Frame */
    background-image: url('../img/frames-std/title-def.png');
}
.card[data-type=Déplacement]>.content>.header:before{
    /* Frame */
    background-image: url('../img/frames-std/title-dep.png');
}
.card[data-type=Concentration]>.content>.header:before{
    /* Frame */
    background-image: url('../img/frames-std/title-con.png');
}
.card[data-type=Rhétorique]>.content>.header:before{
    /* Frame */
    background-image: url('../img/frames-std/title-rhe.png');
}

.card>.content>.header>.title {
    /* Geometry */
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:0.167in;

    /* Text */
    line-height: 0.167in;
    padding: 0 .2em;
}

.card>.content>.header>.type {
    /* Geometry */
    position: absolute;
    bottom:0;
    left:0.104in;
    width:1.892in;
    height:0.1in;
    
    /* Text */
    font-size: 6pt;
    line-height: 0.104in;
    padding: 0 .1em;
    }

/******************************/
/*           STEPS            */
/******************************/


.card>.content>.steps{
    /* Geometry */
    position: absolute;
    bottom:calc(3mm + 0.3in);
    left:calc(3mm + 0.2in);
    width:1.417in;
    height: auto;
}

.step{
    /* Geometry */
    position: relative;
    width:1.417in;
    height:0.167in;

    margin-top:0.09in;
}

.step>.step-text{
    /* Geometry */
    position: absolute;
    bottom: 0;
    height:0.167in;
    width: 100%;

    /* Text */
    line-height: 0.167in;
    padding: 0 .2em;
    
}

.step:before{
    /* Frame Display */
    display: block;
    content:'';

    /* Frame Geometry */
    position: absolute;
    top:-0.024in;
    left:-0.024in;
    width: 1.458in;
    height: 0.208in;

    /* Frame */
    background-image: url('../img/frames-std/step.png');
    background-size: 100% 100%;
}

.step.condition:before{
    /* Frame */
    background-image: url('../img/frames-std/step-cond.png');
}

.step.permanente:before,
.step.intervention:before{
    /* Frame Geometry */
    top:-0.024in;
    left:-0.066in;
    width: 1.549in;
    height: 0.215in;

    /* Frame */
    background-image: url('../img/frames-std/step-perm.png');
}

.step.intervention:before {
    /* Frame */
    background-image: url('../img/frames-std/step-stable.png');
}

/* Step with br */

.step>.step-text:has(br){
    /* Geometry */
    height:0.333in;
}

.step:has(br){
    /* Geometry */
    height:0.333in;
}

.step.permanente:has(br):before{
    /* Frame Geometry */
    height: 0.382in;

    /* Frame */
    background-image: url('../img/frames-std/step-perm-big.png');
}

/* Step with br and target */

.step:has(br):has(sup){
    /* Geometry */
    height:0.457in;

}

.step.permanente:has(br):has(sup):before{
    /* Frame Geometry */
    height: 0.485in;
    top:-0.007in;

    /* Frame */
    background-image: url('../img/frames-std/step-perm-target-big.png');
}


/* Step with Target */

.step:has(sup){
    /* Geometry */
    height:0.291in;
    margin-top:0.079in;

}

.step>.step-text sup {
    /* Geometry */
    position: absolute;
    top:-0.12in;
    left:0.04in;
    width:1.337in;
    height:0.10in;

    /* Text */
    font-size: 6pt;
    line-height: 0.104in;
    padding: 0 .1em;
}

.step:has(sup):before{
    /* Frame Geometry */
    top:0;
    height: 0.312in;

    /* Frame */
    background-image: url('../img/frames-std/step-target.png');
}

.step.permanente:has(sup):before{
    /* Frame Geometry */
    top:-0.007in;
    height: 0.318in;

    /* Frame */
    background-image: url('../img/frames-std/step-perm-target.png');
}

/* Inline type */

.step .inline-type {
    /* Geometry */
    display: inline-block;
    
    /* Geometry */
    padding: 0 .4em;
    line-height: 6pt;

    /* Frame */
    border-radius:1em;
    border:0.01in solid black;
    
    /* Text */
    font-size: 6pt;
}

.inline-type.attaque {
    background:#f57d8c;
}

.inline-type.defense {
    background:#98bedd;
}

.inline-type.deplacement {
    background:#ffd887;
}

.inline-type.concentration {
    background:#88bc9b;
}

.inline-type.rhetorique {
    background:#b18eb2;
}

/* Small */

.steps small {
    font-size: 7.5pt;
}

.steps small small{
    font-size: 6pt;
}
/******************************/
/*           FOOTER           */
/******************************/


.card>.content>.footer{
    /* Geometry */
    position: absolute;
    bottom:calc(3mm + 0.1in - 0.01in);
    left:calc(3mm + 0.1in);
    width:2.3in;
    height:0.1in;
    z-index: 1;

    /* Flex */
    display: flex;
    justify-content: space-between;

    /* Text */
    line-height: 0.1in;
    color:white;
    font-family: 'Archivo Narrow';
    font-size:6pt;   
}


/******************************/
/*           VARIANT LF       */
/******************************/

.card[data-treatment="LF"]>.content>.steps {
    transform-origin: bottom left;
    scale:145%;
    translate: 2%;
}


/******************************/
/*           VARIANT BL       */
/******************************/

.card[data-treatment="BL"] .step:before,
.card[data-treatment="BL"] .header:before
{
    opacity:.7;
}

.card[data-treatment="BL"]>.content:before {
    background-image: url('../img/frames-std/content-bl.png');
}