/* =========================
   CONTAINER
========================= */

.ff-container{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* =========================
   TITRES (local uniquement)
========================= */

#contenuvariable h1,
#contenuvariable h2,
#contenuvariable h3,
#contenuvariable h4{
    background:none !important;
}

/* =========================
   CARDS
========================= */

.ff-card{
    background:#f5efe6;
    border-radius:calc(14px * var(--scale));
    padding:calc(16px * var(--scale));

    width:90%;

    margin:calc(12px * var(--scale)) 0;

    border:calc(2px * var(--scale)) solid #c2a57a;
    box-shadow:0 calc(4px * var(--scale)) calc(10px * var(--scale)) rgba(0,0,0,0.25);
}

/* =========================
   ITEMS
========================= */

.ff-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:calc(10px * var(--scale));
    margin:calc(7px * var(--scale)) 0;

    flex-wrap:nowrap;
}

/* =========================
   LEFT
========================= */

.ff-left{
    display:flex;
    align-items:center;
    gap:calc(6px * var(--scale));
}

/* =========================
   ICONES
========================= */

.ff-icone{
    width:calc(105px * var(--scale));
    height:calc(105px * var(--scale));
    object-fit:contain;
    flex-shrink:0;
}

/* =========================
   STATS MIN MAX
========================= */

.ff-stats{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:calc(6px * var(--scale));

    min-width:calc(120px * var(--scale));
    flex-shrink:0;
}

.ff-stat{
    padding:calc(3px * var(--scale)) calc(7px * var(--scale));
    border-radius:calc(6px * var(--scale));
    font-size:calc(16px * var(--scale));
}

/* séparateur */

.ff-sep{
    opacity:0.6;
    font-size:calc(16px * var(--scale));
}

/* =========================
   TOTAL
========================= */

.ff-total{
    margin-top:calc(12px * var(--scale));
    padding-top:calc(8px * var(--scale));
    border-top:1px solid rgba(0,0,0,0.2);
    text-align:center;
    font-size:calc(18px * var(--scale));
}

/* =========================
   CERBERE
========================= */

.cerbere{
    color:#c0392b;
    font-weight:bold;
}

/* =========================
   MULTIBADGE
========================= */

.ff-badge-stack{
    position:relative;
    display:inline-block;
}

.ff-badge-stack img{
    display:block;
}

.ff-badge-multi{
    position:absolute;

    bottom:calc(6px * var(--scale));
    right:calc(6px * var(--scale));

    background:#fff;
    color:#000;

    width:40%;
    height:40%;

    font-size:calc(1.2em * var(--scale));

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:bold;

    box-shadow:0 0 calc(6px * var(--scale)) rgba(0,0,0,0.7);
}

/* =========================
   MOBILE
========================= */

@media (max-width:700px){

    .ff-card{
        width:95%;
        padding:calc(14px * var(--scale));
    }

    .ff-item{
        gap:calc(8px * var(--scale));
    }

    .ff-icone{
        width:calc(85px * var(--scale));
        height:calc(85px * var(--scale));
    }

    .ff-stats{
        min-width:auto;
        gap:calc(5px * var(--scale));
    }

    .ff-stat{
        font-size:calc(15px * var(--scale));
    }

    .ff-total{
        font-size:calc(17px * var(--scale));
    }

}