Code:

<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet"><div class="fichecapa-fant">
<!-- ENTETE --><div class="fichecp-entete">
<!-- IMAGE PERSO --><img src="https://images2.imgbox.com/20/c3/rclvv6i3_o.png">
<!-- NOM PERSO --><span class="fichecp-etitle">Prénom Nom ou Nom</span>
<!-- FIN ENTETE --></div>

<div class="fichecapa-gr">
<!-- GROUPE --><span>Groupe</span>
<!-- RANG --><span>Rang</span>
</div>

<!-- EVENTUELLES INFOS --><div class="fichecapa-infos">
<span class="fichecapa-ititle">D'éventuelles infos</span>
Nullam facilisis volutpat nisl, vel pellentesque felis fermentum ut. Donec ut nibh ornare, rutrum nulla et, cursus ipsum. Integer faucibus accumsan aliquet. Vivamus nec ligula a magna tristique hendrerit in tempor urna. Morbi auctor ut metus ac imperdiet. Duis tempus rutrum sapien sit amet pulvinar. Ut pharetra velit vitae nisl maximus, non luctus lacus fermentum. Fusce laoreet, mi quis ultricies volutpat, lacus odio iaculis augue, at mattis velit arcu ut massa.

Donec porttitor accumsan nibh id suscipit. Interdum et malesuada fames ac ante ipsum primis in faucibus. In hac habitasse platea dictumst. Nulla aliquet tristique felis sit amet luctus. Quisque ullamcorper sem enim, eget rutrum augue congue ac. Etiam consectetur ante sit amet quam tincidunt pellentesque. Proin egestas nisi at ante efficitur venenatis.

Donec condimentum sodales neque, non cursus arcu pharetra ac. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam elementum quam nunc, at vestibulum dolor finibus quis. Pellentesque id risus velit. Etiam cursus purus in erat bibendum tristique. Nam sit amet eros ultrices, fermentum leo quis, hendrerit lectus. Integer sodales dui neque, eu lobortis tellus pretium sit amet. Donec mauris mi, facilisis ac aliquam et, sodales vel lorem. Proin aliquam rhoncus lacus,
<!-- FIN EVENTUELLES INFOS --></div>

<!-- CARACTERISTIQUES --><div class="fichecapa-cara"><span class="fichecapa-ititle fichecapa-ititleright">Caractéristiques</span>
<!-- UNE CARACTERISTIQUE --> <div class="fcp-caracteris">
<span class="fcp-caractitle">Force</span>
<div class="fcp-barre"><span class="fcp-avancementb" style="width:90% !important;">18</span></div>
<!-- FIN UNE CARACTERISTIQUE --></div>
<!-- UNE CARACTERISTIQUE --> <div class="fcp-caracteris">
<span class="fcp-caractitle">Dextérité</span>
<div class="fcp-barre"><span class="fcp-avancementb"  style="width:10% !important;">5</span></div>
<!-- FIN UNE CARACTERISTIQUE --></div>
<!-- FIN CARACTERISTIQUES --></div>

<!-- CAPACITES --><div class="fichecapa-capa"><span class="fichecapa-ititle">Capacités</span>
<!-- CONTENU --><div class="fcp-capacite">
<img src="https://zupimages.net/up/22/36/95qs.png" class="fcp-cpimg">
<span class="fcp-cptxt">
<span class="fcp-cpname">Nom</span>
<span class="fcp-cpcout">Coût en ???</span>
<span class="fcp-cpcont">Description courte pour avoir l'info rapidement</span>
<!-- FIN CONTENU --></span></div>
<!-- CONTENU --><div class="fcp-capacite">
<img src="https://zupimages.net/up/22/36/95qs.png" class="fcp-cpimg">
<span class="fcp-cptxt">
<span class="fcp-cpname">Nom</span>
<span class="fcp-cpcout">Coût en ???</span>
<span class="fcp-cpcont">Description courte pour avoir l'info rapidement</span>
<!-- FIN CONTENU --></span></div>
<!-- CONTENU --><div class="fcp-capacite">
<img src="https://zupimages.net/up/22/36/95qs.png" class="fcp-cpimg">
<span class="fcp-cptxt">
<span class="fcp-cpname">Nom</span>
<span class="fcp-cpcout">Coût en ???</span>
<span class="fcp-cpcont">Description courte pour avoir l'info rapidement</span>
<!-- FIN CONTENU --></span></div>
<!-- CONTENU --><div class="fcp-capacite">
<img src="https://zupimages.net/up/22/36/95qs.png" class="fcp-cpimg">
<span class="fcp-cptxt">
<span class="fcp-cpname">Nom</span>
<span class="fcp-cpcout">Coût en ???</span>
<span class="fcp-cpcont">Description courte pour avoir l'info rapidement</span>
<!-- FIN CONTENU --></span></div>
<!-- CONTENU --><div class="fcp-capacite">
<img src="https://zupimages.net/up/22/36/95qs.png" class="fcp-cpimg">
<span class="fcp-cptxt">
<span class="fcp-cpname">Nom</span>
<span class="fcp-cpcout">Coût en ???</span>
<span class="fcp-cpcont">Description courte pour avoir l'info rapidement</span>
<!-- FIN CONTENU --></span></div>
<!-- CONTENU --><div class="fcp-capacite">
<img src="https://zupimages.net/up/22/36/95qs.png" class="fcp-cpimg">
<span class="fcp-cptxt">
<span class="fcp-cpname">Nom</span>
<span class="fcp-cpcout">Coût en ???</span>
<span class="fcp-cpcont">Description courte pour avoir l'info rapidement</span>
<!-- FIN CONTENU --></span></div>
<!-- FIN CAPACITES --></div>

<!-- FIN FICHE CAPACITE --></div>

Pour modifier la taille de la barre des caractéristiques, il faut se baser sur le pourcentage. Exemple : si le maximum d'une caractéristique est de 20 alors si le perso a 5 en force, il s'agit de 25% de la barre.
Il faut donc modifier le style="width:10%;" par 25%.

Code:

.fichecapa-fant, .fichecapa-fant *{ box-sizing:border-box; }
.fichecapa-fant img{ object-fit:cover; }
.fichecapa-fant br{ display:none; }

/* ACCORDER LES SAUTS DE LIGNE */

.fichecapa-fant .fichecapa-infos br, .fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cptxt .fcp-cpcont br{ display:inline-block; }
/* COULEURS */
:root{
    --fc-fond:#FAFAFA;
    --fc-bordurefond:hsl(0,0%,91%);
    --fc-fond2:#E6E6E6;
    --fc-fond3:#F2F2F2;
    
    --fc-color1:#4C624B;
    --fc-color2:#8A8A8A;
    --fc-color3:#6C8158;
    --fc-color4:#D1CC98;
    
    --fc-deg1:linear-gradient(var(--fc-color1), var(--fc-color2));
  --fc-deg2:linear-gradient(to right, var(--fc-color3), var(--fc-color4));
    
    --fc-fonttitle:"Luckiest Guy", cursive;
    --fc-fonttxt:"Mulish", sans-serif;
}


/* FOND */
.fichecapa-fant{ width:550px; margin:0 auto;background:var(--fc-fond);
padding:15px; border-radius:30px; border:1px solid var(--fc-bordurefond); }

/* ENTETE */
.fichecapa-fant .fichecp-entete{ display:flex; align-items:center; }
.fichecapa-fant .fichecp-entete img{ width:35%; height:150px; border-radius:10px; }
.fichecapa-fant .fichecp-entete .fichecp-etitle{ width:64%; margin-left:10px;
font-family:var(--fc-fonttitle); font-size:35px; line-height:35px; text-align:right;
  background: var(--fc-deg1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}

/* INFOS SUPP */
.fichecapa-fant .fichecapa-gr{ display:flex; justify-content:space-between; margin-top:15px; }
.fichecapa-fant .fichecapa-gr span{ display:block; font-family:var(--fc-fonttitle); text-align:center;
    width:49%; font-size:20px; padding:10px; background:var(--fc-fond2); border-radius:10px;
color:var(--fc-color1); }
.fichecapa-fant .fichecapa-gr span:nth-child(4){ color:var(--fc-color2); }

/* EVENTUELLES AUTRES INFOS */
.fichecapa-fant .fichecapa-infos{ background:var(--fc-fond3); margin-top:10px;
padding:10px; border-radius:10px; font-family:var(--fc-fonttxt);
    height:250px; overflow:auto; text-align:justify;}


/* CARACTERISTIQUES */
.fichecapa-fant .fichecapa-ititle{ font-size:20px; font-family:var(--fc-fonttitle);
  background: var(--fc-deg1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; margin-bottom:15px; display:inline-block; margin-top:15px;
 }
.fichecapa-fant .fichecapa-ititle.fichecapa-ititleright{ text-align:right; display:block;}
.fichecapa-fant .fichecapa-infos .fichecapa-ititle{ font-size:15px;
 margin-top:0; margin-bottom:5px; }

/* UNE CARACTERISTIQUE */
.fichecapa-fant .fichecapa-cara{ margin-top:25px; }
.fichecapa-fant .fcp-caracteris{ display:flex; justify-content:space-between;
    align-items:center; margin:8px 0;}
.fichecapa-fant .fcp-caracteris .fcp-caractitle{ font-family:var(--fc-fonttitle);
font-size:15px; color:var(--fc-color2); width:23%;}
.fichecapa-fant .fcp-caracteris .fcp-barre{ background:var(--fc-deg2); height:10px;
    width:76%; border-radius:5px; }
.fichecapa-fant .fcp-caracteris .fcp-barre .fcp-avancementb{ display:block;
background:var(--fc-color1); border-radius:5px; font-size:11px; font-family:var(--fc-fonttitle);
color:#fff; text-align:center; margin-top:-5px; margin-left:10px; margin-right:10px;}

/* CAPACITES */
.fichecapa-fant .fichecapa-capa{ margin-top:25px; display:flex; justify-content:center;
flex-wrap:wrap; }
.fichecapa-fant .fichecapa-capa .fichecapa-ititle{ width:100%; }
.fichecapa-fant .fichecapa-capa .fcp-capacite{ width:24%; height:120px; transition:500ms;
    border-radius:10px; position:relative; overflow:hidden; margin:0 0 5px 5px;
}
.fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cpimg{ display:block; border-radius:10px; height:120px;
}
.fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cptxt{ position:absolute; top:0; left:0;
background:var(--fc-fond2); padding:5px; text-align:justify;
    font-family:var(--fc-fonttxt); font-size:12px; line-height:14px; }
.fichecapa-fant .fichecapa-capa .fcp-capacite:hover{ overflow:visible; z-index:99; transition:1000ms;}
.fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cptxt{  height:150px; transform:scale(0); transition:500ms;}
.fichecapa-fant .fichecapa-capa .fcp-capacite:hover .fcp-cptxt{ transform:scale(1); border-radius:10px;
    top:-1px;transition:500ms;}
.fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cptxt .fcp-cpname,
.fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cptxt .fcp-cpcout
{ font-family:var(--fc-fonttitle); width:100%; display:block; background:#fff; text-align:center;
border-radius:5px; margin-bottom:5px; font-size:12px; line-height:12px; padding:3px 0; }
.fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cptxt .fcp-cpname{ color:var(--fc-color3); }
.fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cptxt .fcp-cpcout{ color:var(--fc-color4); }
.fichecapa-fant .fichecapa-capa .fcp-capacite .fcp-cptxt .fcp-cpcont{ height:93px; padding:5px;  
display:block; overflow:auto;}