[TEST] Fiche de personnage V2

    <link href="https://fonts.googleapis.com/css?family=Josefin Sans" rel="stylesheet"><style>:root {--couleur-fond: #06141F;--couleur-fond: #06141f;--bordure-int: #06141f;--bordure-bloc: #06141f;}.app {width: 550px;font-family: 'Josefin Sans', sans-serif;background-color: #06141F;padding: 5px;box-sizing: border-box;border: 3px solid #cc9933;margin: auto;position: relative;}.app h2,.app h3 {font-family: 'Josefin Sans', sans-serif;color: #b3a695;margin: 0;text-transform: uppercase;letter-spacing: 3px;font-size: 15px;font-weight: bold;}.app h2 {background-color: var(--couleur-fond);text-align: center;color: #b3a695;padding: 30px 0;border: 2px solid var(--bordure-bloc);}.app h3 {color: #b3a695;margin-bottom: 10px;}.app-basics, .joueur {display: -webkit-box;display: -ms-flexbox;display: flex;}.app-info {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 320px;}.app ul {border: 1px solid var(--bordure-bloc);border-top: 0;border-bottom: 0;padding:10px 15px;margin: 0;list-style-type: none;font-size: 10px;background: var(--couleur-fond2);color: #b3a695;height: 320px;overflow: auto;}.app ul li {border-bottom: 1px solid #b3a695;padding: 10px 0 10px;display: block;}.app ul li:last-child {border-bottom: 0;}.app ul li label {color: inherit;width: 30%;display: inline-block;font-weight: bold;text-transform: uppercase;font-family: 'Josefin Sans', sans-serif;}.app .app-avatar {padding: 1px;background: #cc9933;box-sizing:border-box;}.app .app-avatar img {vertical-align: middle;height: 320px;width: 200px;}.app-quote {line-height: 11px;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;background: #06141f;display: inline-block;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;color: #b3a695;vertical-align: top;padding: 20px;box-sizing: border-box;text-align: justify;}.app-story {background-color: var(--couleur-fond);border: 1px solid var(--bordure-bloc);padding: 10px;box-sizing: border-box;height: 300px;}.app-story + .app-story {border-top: 0;height: auto;}.app-story > div {background-color: #06141F;border: 1px solid #CC9933;padding: 30px 50px;box-sizing: border-box;box-shadow: inset 6px 0 var(--bordure-int), inset 0 6px var(--bordure-int),inset -6px 0 var(--bordure-int), inset 0 -6px var(--bordure-int);height: 100%;}.app-story > div > div {font-size: 11px;color: #b3a695; text-align: justify;height: 100%;overflow: auto;padding-right: 10px;line-height: 14px;}.joueur .app-avatar {height: 100px;width: 100px;}.app-joueur {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}.app-joueur-head {font-family: 'Josefin Sans', sans-serif;background-color: var(--couleur-fond2);text-transform: uppercase;color: #cc9933;font-size: 10px;letter-spacing: 1px;padding: 10px;border: 1px solid var(--bordure-bloc);border-top: 0;}.app-joueur .infos {background-color: var(--couleur-fond);text-transform: none;color: #cc9933;font-family: "Josefin Sans";letter-spacing: 0px;height: 40px;overflow: auto;border: 1px solid var(--bordure-bloc);border-top: 0;padding: 10px;font-size: 11px;box-sizing: content-box;}.app-credit {position: absolute;bottom: -15px;left: 0;}.app-credit a {font-family: 'Josefin Sans', sans-serif;text-transform: uppercase;letter-spacing: 1px;font-size: 7px;font-weight: bold;text-decoration: none!important;color: #06141F;}</style>

    <div class="app"><h2>Prénom Nom</h2><!--
    --><div class="app-basics"><div class="app-info"><ul><!--
    --><li><label>Surnom</label>écrire ici</li><!--
    --><li><label>Né(e) le</label> écrire ici</li><!--
    --><li><label>Sexe</label> écrire ici</li><!--
    --><li><label>Race</label> écrire ici</li><!--
    --><li><label>Affiliation</label> écrire ici</li><!--
    --><li><label>Métier</label> écrire ici</li><!--
    --><li><label>Avatar</label> écrire ici</li></ul><!--

    --><div class="app-quote">Citation ici</div><!--

    --></div><div class="app-avatar"><img src="http://via.placeholder.com/200x320"  /></div></div><!--


    --><div class="app-story"><div><div><h3>Physique & Caractère</h3>Texte ici</div></div></div><!--


    --><div class="app-story"><div><div><h3>Histoire</h3>Texte ici</div></div></div><!--

    --><div class="joueur"><img src="http://via.placeholder.com/80x80" class="app-avatar" /><div class="app-joueur"><div class="app-joueur-head">Créé par <b>Nom du joueur</b></div><div class="infos">Infos supplémentaires</div></div></div><div class="app-credit"><a href="http://terrible.forumactif.org" target="_blank">Awful</a></div></div>