@import url('https://fonts.googleapis.com/css2?family=Jim+Nightshade&family=Metamorphous&family=Playfair:opsz@5..1200&display=swap');
/* font-family: "Metamorphous", serif; */
/* font-family: "Jim Nightshade", serif; */


.charsheet {
  /* font-family: "Playfair", serif; */
  font-family: "Metamorphous", serif;
  color: var(--black);
  font-size: 16px;
  letter-spacing: -0.4px;
  line-height: 18px;
  margin: 0px;
  min-width: 850px;
  --black: #000002;
  --white: #fcfcfd;
  --font_playfair: "Playfair", serif;
  --color_dev: rgba(255, 0, 0, 0.062);
  --text_input_info: #a20303d4;
  --hover_bouton: #a20303d4;
  --border_armes:  #000000d1;
  --color_text_boutton_menu: #000000d4;


  /* VARIABLES GLOBALES */
  --box_shadow_page: 0px 0px 6px 6px #000000ba;
  --image_portrait_shadow: 0px 0px 14px 2px black;
  --image_portrait_background: black;

  --background_page: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/background.webp);
  --background_menu: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/background_menu.webp);
  --esoterik_info: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/esoterik_background_info.webp);
  --esoterik_carac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/esoterik_background_carac.webp);
  --esoterik_competences: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/esoterik_background_competences.webp);
  --esoterik_equipement: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/esoterik_background_armement.webp);
  --cadre_titre_gauche: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/cadre3.webp);
  --cadre_titre_droite: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/cadre4.webp);
  --hexagramme: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/hexagram.webp);
  --cadre_input_carac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/border_carac.webp);
  --separateur_vertical_carac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_croix.webp);
  --separateur_horizontal_carac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_horizontal_1.webp);
  --separateur_crane_competence: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_crane_blanc.webp);
  --separateur_centre_competence: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_centre_comp.webp);
  --separateur_croix_competence: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/separateur_bas_croix.webp);
  --armes_barre_titre: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/barre_titre_armes.webp);
  --armes_image_1: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_armes.webp);
  --armure_dessin_plaque: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_plaque1.webp);
  --armure_dessin_maille: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_maille.webp);
  --armure_dessin_cuir: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_cuir1.webp);
  --armure_dessin_tissu: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_tissu1.webp);
  --armure_dessin_aucune: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/armure_aucune.webp);
  --bouclier_dessin_rond: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/bouclier_rond.webp);
  --bouclier_dessin_pavois: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/bouclier_pavois.webp);
  --bouclier_dessin_aucun: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/bouclier_aucune.webp);
  --fond_zone_note: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/ligne_notes.webp);
  --dessin_sac: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_sac.webp);
  --dessin_bourse: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/illustration_coffre.webp);
  --dessin_carnet:  url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_carnet.webp);


  /* FIN VARIABLES GLOBALES */ 

  --couleur_ligne: #000000e5;
  --text_input: #000000bd;
  --color_border_equipement: #000000d9;
  --color_border_parcours_personnes: #000000d9;
  --color_ligne_menu: #00000078;
  --color_border_button: #595959;    
  --color_background_button: #fcfcfd;
  --color_background_button_selected: #3e0303d4;    
  --color_text_button: #0000009e;
  --color_text_button_selected: #fcfcfd;
  --color_button_hover: #d7d2d2;
  --color_text_hover: #a20303d4;
  --color_ombre_button: #575757a8;
}

.sheet-darkmode .charsheet {
  --box_shadow_page: 2px 1px 5px 4px #643a3aba;
}

.sheetform {
  background-color: #ffffff;
  width: auto;
}

.sheet-darkmode .sheetform {
  background-color: #ffffff00;
}

::placeholder {
  color: #00000073;
  font-weight: bold;
  margin-top: 0px;
}

span.picto {
  font-family: 'pictos';
}

span.D20 {
  font-family: 'dicefontd20';
  font-size: 32px;
}

span.point {
  margin-right: 10px;
  font-family: 'Helvetica Neue';
}

img.portrait,
img.portrait_aude,
img.portrait_einarth,
img.portrait_felix,
img.portrait_baudoin {
  border-radius: 120px;
  box-shadow: var(--image_portrait_shadow);
  background: var(--image_portrait_background);
}

img.portrait_aude {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_aude.webp);
  background-size: 170px 170px
}

img.portrait_einarth {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_einarth.webp);
  background-size: 170px 170px
}

img.portrait_felix {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_felix.webp);
  background-size: 170px 170px
}

img.portrait_baudoin {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_baudoin.webp);
  background-size: 170px 170px
}

.charsheet textarea {
  border: none;
  outline: none;
  resize: none;
  background-color: transparent;
}

.charsheet textarea.sac {
  font-size: 16px;
  line-height: 19px;
  color: var(--text_input_info);
  font-family: "Playfair", serif;
  padding: 10px;
  padding-left: 51px;
  overflow: hidden;
  background-image: var(--fond_zone_note);
  background-size: auto 13.7px;
  width: 91%;
  height: 92%;
}

.charsheet textarea.carnet {
  font-size: 19px;
  line-height: 22px;
  color: var(--black);
  padding: 10px;
  overflow: hidden;
  background-image: var(--fond_zone_note);
  background-size: auto 13.7px;
  width: 94%;
  height: 95%;
  font-family: 'Jim Nightshade';
}

.charsheet input {  
  border: none;
  outline: none;
  resize: none;
  padding: 0px;
  cursor: pointer;
  overflow: hidden;
  font-family: "Playfair", serif;
  color: var(--black);
  font-size: 16px;
  line-height: 25px;
  background: white;
  z-index: 1;
}

.charsheet input.input_ligne,
.charsheet input.input_ligne_droite,
.charsheet input.input_dotted_gauche,
.charsheet input.input_dotted_centre { 
  width: 100% !important;
  border-bottom: 1px dotted var(--couleur_ligne);
  height: 20px !important;
  border-radius: 1px;
  padding-left: 2px;
  padding-right: 5px;
  color: var(--text_input_info);
  letter-spacing: 0px;
  background: none;
  padding-top: 3px;
  font-size: 14px;
}

.charsheet input.input_ligne_droite {
  text-align: right;
}

.charsheet input.input_dotted_centre {  
    text-align: center;
}

.charsheet input.input_dotted_gauche {  
    text-align: left;
    padding-left: 5px;
}

.charsheet input.input_aura,
.charsheet input.input_hero_here,
.charsheet input.input_carac,
.charsheet input.input_carac_xp,
.charsheet input.input_carac_xp_dispo,
.charsheet input.input_carac_lock,
.charsheet input.input_comp,
.charsheet input.input_comp_lock,
.charsheet input.input_demi_carac,
.charsheet input.input_carac_long,
.charsheet input.input_carac_pnj,
.charsheet input.input_demi_carac_pnj,
.charsheet input.input_carac_pnj_long,
.charsheet input.input_config {  
  width: 50px !important;
  height: 28px;
  border: none;
  border-radius: 1px;
  background-color: var(--white);
  color: var(--black);
  text-align: center;
  font-size: 20px;
  padding: 0;
  padding-bottom: 6px;
}

.charsheet input.input_aura {
  width: 45px !important;
  height: 45px;
  border-radius: 30px;
  background-color: transparent;
  color: var(--white);
  text-align: center;
  font-size: 22px;
  padding: 0;
  padding-bottom: 5px;
  margin-top: 0px;
  font-family: 'Metamorphous';
  font-weight: bold;
  border: none;
  cursor: default;
}

.charsheet input.input_hero_here {
  width: 55px !important;
  height: 55px;
  border-radius: 30px;
  background-color: transparent;
  color: var(--white);
  text-align: center;
  font-size: 22px;
  padding: 0;
  padding-bottom: 5px;
  margin-top: 0px;
  font-family: 'Metamorphous';
  font-weight: bold;
  border: 2px solid black;
  cursor: default;
  margin-left: 10px;
  margin-right: 10px;
}

.charsheet input.input_carac {
  width: 78px !important;
  height: 67px;
  border: none;
  border-radius: 30px;
  background-color: transparent;
  color: var(--text_input_info);
  text-align: center;
  font-size: 15px;
  padding: 0;
  padding-bottom: 0px;
  margin-top: 0px;
  font-family: 'Metamorphous';
  font-weight: bold;
}

.charsheet input.input_carac_xp_dispo {
  border: none;
  border-radius: 0px;
  width: 80px !important;
  height: 60px;
  background-color: transparent;
  color: var(--white);
  text-align: center;
  font-size: 35px;
  padding: 0;
  padding-bottom: 0px;
  margin-top: 0px;
  font-family: 'Metamorphous';
  font-weight: bold;
  cursor: default;
}

.charsheet input.input_carac_xp {
  border: 1px solid #00000054;
  border-radius: 16px;
  width: 37px !important;
  height: auto;
  background-color: transparent;
  color: #510101d4;
  text-align: center;
  font-size: 14px;
  padding: 0;
    padding-bottom: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  font-family: 'Metamorphous';
  font-weight: bold;
}

.charsheet input.input_derivees,
.charsheet input.input_derivees_lock { 
  width: 100% !important;
  border-bottom: 1px dotted var(--couleur_ligne);
  height: 25px !important;
  border-radius: 1px;
  color: var(--black);
  letter-spacing: 0px;
  background: none;
  text-align: center;
  font-size: 20px;
  font-family: 'Metamorphous';
}

.charsheet input.input_derivees_lock { 
  border: none;
  cursor: default;
}


.charsheet input.input_carac_lock {
  cursor: default;
}

.charsheet input.input_comp {
  width: 35px !important;
  height: 35px;
  border-radius: 30px;
  background-color: transparent;
  color: var(--text_input_info);
  text-align: center;
  font-size: 13px;
  padding: 0;
  padding-bottom: 0px;
  margin-top: 0px;
  font-family: 'Metamorphous';
  font-weight: bold;
}

.charsheet input.input_comp_double {
  width: 35px !important;
  height: 71px;
  border-radius: 10px;
  background-color: transparent;
  color: var(--text_input_info);
  text-align: center;
  font-size: 13px;
  padding: 0;
  padding-bottom: 47px;
  margin-top: 45px;
  font-family: 'Metamorphous';
  font-weight: bold;
}

.charsheet input.input_comp_lock {
  width: 31px !important;
  height: 35px;
  background: transparent;
  color: #fdfdfdfc;
  text-align: center;
  font-size: 15px;
  padding: 0;
  padding-bottom: 3px;
  margin-top: 0px;
  font-family: 'Metamorphous';
  cursor: default;
}

.charsheet input.input_carac_pnj,
.charsheet input.input_demi_carac_pnj,
.charsheet input.input_carac_pnj_long {
  height: 23px;
  font-size: 22px;
  padding-bottom: 3px;
}

.charsheet input.input_demi_carac,
.charsheet input.input_demi_carac_pnj {  
  width: 28px !important;
}

.charsheet input.input_carac_long,
.charsheet input.input_carac_pnj_long {  
  width: 81px !important;
}

div.fond_blanc {  
  width: 81px;
  background: white;
}

.charsheet input.input_cadre {  
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: var(--black);
}

.charsheet input.input_config {
  width: auto;
  /* border-bottom: 1px dotted var(--couleur_ligne); */
  height: 25px !important;
  border-radius: 1px;
  color: var(--black);
  letter-spacing: 0px;
  background: none;
  text-align: center;
  font-size: 18px;
  font-family: 'Metamorphous';
  border: none;
  cursor: default;
}

.charsheet select.choix_custom,
.charsheet select.choix_armes,
.charsheet select.choix_armures,
.charsheet select.choix_boucliers {
  width: 123px;
  height: 33px;
  letter-spacing: -0.8px;
  border: none;
  border-radius: 1px;
  outline: none;
  cursor: pointer;
  padding: 0;
  padding-right: 0px;
  margin: 0;
  background: transparent;
  color: var(--black);
  font-size: 19px;
  font-family: "Jim Nightshade";
  padding-top: 2px;
}

.charsheet select.choix_armes {
  width: 75%;
}

.charsheet select.choix_armures,
.charsheet select.choix_boucliers {
  width: 100%;
}

.charsheet select.choix_boucliers {
  padding-top: 7px;
}


input[type="checkbox"] {    
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--white);
  margin: 0;
  font: inherit;
  color: var(--white);
  width: 18px;
  height: 18px !important;
  border: 2px solid var(--white);
  border-radius: 1px;
}

input[type="checkbox"]:checked {
  background-color: var(--white);
  border: 2px solid var(--white);
}

label {
  display: inline-block;
  cursor: pointer;
  user-select: none;
  width: 18px !important;
  height: 18px;
  padding: 0px !important;
  margin: 0 !important;
}

label::before {
  content: "";
  width: 18px;
  height: 18px;
}

input[type="checkbox"]:checked + label::before {
  content: "✔";
  display: flex;
  justify-content: center;
  color: var(--black);
  font-size: 17px;
  font-weight: bold;
  margin-top: -17px;
}

div.boucliers_equipee input[type="checkbox"]:checked + label::before {
  margin-top: -23px;
}

input[type="checkbox"]:focus {
  outline: none;
}

.charsheet input[type=number]::-webkit-inner-spin-button,
.charsheet input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type="number"] {
  appearance: none;
  -moz-appearance: textfield;
}

.charsheet button[type=action].button_valider_creation::before,
.charsheet button[type=action].button_aura::before,
.charsheet button[type=action].button_here_hero::before,
.charsheet button[type=action].button_texte::before,
.charsheet button[type=roll].button_texte::before,
.charsheet button[type=action].button_texte_noir::before,
.charsheet button[type=roll].button_texte_noir::before,
.charsheet button[type=action].button_annonce::before,
.charsheet button[type=roll].button_annonce::before,
.charsheet button[type=action].button0::before,
.charsheet button[type=action].button1::before,
.charsheet button[type=action].button2::before,
.charsheet button[type=action].button3::before,
.charsheet button[type=action].button4::before,
.charsheet button[type=action].button5::before,
.charsheet button[type=action].button6::before,
.charsheet button[type=action].button7::before,
.charsheet button[type=action].button8::before,
.charsheet button[type=action].button9::before,
.charsheet button[type=action].button_sens_carte::before,
.charsheet button[type=action].button_carac::before,
.charsheet button[type=action].button_compendium_sm::before,
.charsheet button[type=action].button_compendium_combat::before,
.charsheet button[type=action].button_compendium_aura::before,
.charsheet button[type=action].button_compendium_equipement::before,
.charsheet button[type=action].button_xp::before,
.charsheet button[type=action].button_valider_xp::before,
.charsheet button[type=action].button_comp::before,
.charsheet button[type=roll].button_comp::before,
.charsheet button[type=action].button_show::before,
.charsheet button[type=action].button_avatar::before,
.charsheet button[type=action].button_verrou::before {
	content: '';
}

.charsheet button[type=action].button_aura {
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background: none;
  width: auto !important;
  height: 29px;
  border: none;
  border-radius: 1px;
  color: var(--black);
  font-size: 20px;
  line-height: 20px;
  display: flex;
  align-items: center;
  font-weight: bold;
}

.charsheet button[type=action].button_avatar {
  width: 155px;
  height: 163px;
  box-shadow: none;
  text-shadow: none;
  background: none;
  border-radius: 120px;
  border: none;
}

.charsheet button[type=action].button_here_hero {
  color: var(--white);
  border: 2px solid black;
  border-radius: 30px;
  height: 25px;
  width: 18px;
}

.charsheet button[type=action].button_texte,
.charsheet button[type=roll].button_texte,
.charsheet button[type=action].button_texte_noir,
.charsheet button[type=roll].button_texte_noir {
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background: none;
  width: auto !important;
  text-align: left;
  height: 29px;
  border: none;
  border-radius: 1px;
  color: var(--black);
  font-size: 16px;
  line-height: 25px;
  margin-top: -2px;
  display: flex;
  align-items: center;
}

.charsheet button[type=action].button_show {
  height: 25px;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background-color: transparent;
  background-image: none;
  font-size: 18px;
  text-align: center;
  line-height: 18px;
  margin-top: -7px;
  width: auto;
  font-size: 18px;
  color: #fdfdfd30;
  margin-left: 14px;
}

.charsheet button[type=action].button_verrou {
  height: 15px;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background-color: transparent;
  background-image: none;
  font-size: 12px;
  text-align: center;
  line-height: 12px;
  width: 15px;
  color: unset;
}

.charsheet button[type=action].button_carac,
.charsheet button[type=action].button_compendium_sm,
.charsheet button[type=action].button_compendium_combat,
.charsheet button[type=action].button_compendium_aura,
.charsheet button[type=action].button_compendium_equipement {
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background: none;
  width: auto !important;
  text-align: left;
  height: 25px;
  border: none;
  border-radius: 1px;
  color: var(--black);
  font-size: 13px;
  line-height: 23px;
  margin-top: -2px;
  font-family: "Metamorphous", serif;
  font-weight: bold;
  text-align: center;
}

.charsheet button[type=action].button_compendium_sm {
  color: #710071;
}

.charsheet button[type=action].button_compendium_combat {
  color: #710000;
}

.charsheet button[type=action].button_compendium_aura {
  color: #05109b;
}

.charsheet button[type=action].button_compendium_equipement {
  color: #6f3e00;
}

.charsheet button[type=action].button_xp {
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background: none;
  width: auto !important;
  text-align: left;
  height: 29px;
  border: none;
  border-radius: 1px;
  color: var(--black);
  font-size: 15px;
  line-height: 25px;
  margin-top: -2px;
  font-family: "pictos", serif;
  font-weight: bold;
  text-align: center;
}

.charsheet button[type=action].button_valider_creation {
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background: var(--black);
  width: auto !important;
  height: 40px;
  border: none;
  border-radius: 10px;
  color: var(--white);
  font-size: 15px;
  line-height: 25px;
  font-family: "Metamorphous", serif;
  font-weight: bold;
  text-align: center;
  padding: 25px;
}

.charsheet button[type=action].button_valider_xp {
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background: #071d3e;
  width: 540px;
  height: 120px;
  border: none;
  border-radius: 10px;
  color: var(--white);
  font-size: 15px;
  line-height: 20px;
  font-family: "Metamorphous", serif;
  font-weight: bold;
  text-align: center;
  padding: 0;
}

.charsheet button[type=action].button_comp,
.charsheet button[type=roll].button_comp {
  padding: 0;
  margin: 0;
  box-shadow: none;
  text-shadow: none;
  background: none;
  width: auto !important;
  height: 20px;
  border: none;
  border-radius: 1px;
  color: var(--black);
  font-size: 19px;
  font-family: "Jim Nightshade";
  padding-top: 2px;
}

.charsheet button[type=action].button_texte_noir,
.charsheet button[type=roll].button_texte_noir {
  color: var(--black);
}

.charsheet button[type=action].button0,
.charsheet button[type=action].button1,
.charsheet button[type=action].button2,
.charsheet button[type=action].button3,
.charsheet button[type=action].button4,
.charsheet button[type=action].button5,
.charsheet button[type=action].button6,
.charsheet button[type=action].button7,
.charsheet button[type=action].button8,
.charsheet button[type=action].button9 {
  text-shadow: none;
  background: var(--color_background_button);
  text-align: left;
  height: 19px;
  border: 1px solid var(--color_border_button);
  color: #000000d4;
  font-size: 14px;
  margin-left: -5px;
  border-radius: 10px 10px 0px 0px;
  border-bottom: 2px solid #0000008f;
  padding-right: 15px;
  padding-left: 10px;
  font-family: "Metamorphous", serif;
  font-size: 10px;
  box-shadow: -4px 1px 6px 0px var(--color_ombre_button);
  background-image: var(--background_menu);
}

.charsheet button[type=action].button_texte:hover,
.charsheet button[type=roll].button_texte:hover,
.charsheet button[type=action].button_texte_noir:hover,
.charsheet button[type=roll].button_texte_noir:hover {
  font-weight: bold;
}

.charsheet button[type=action].button_aura:hover,
.charsheet button[type=action].button_carac:hover,
.charsheet button[type=action].button_xp:hover,
.charsheet button[type=action].button_comp:hover,
.charsheet button[type=roll].button_comp:hover,
.charsheet button[type=action].button_compendium_sm:hover,
.charsheet button[type=action].button_compendium_combat:hover,
.charsheet button[type=action].button_compendium_aura:hover,
.charsheet button[type=action].button_compendium_equipement:hover {
  color: var(--hover_bouton);
}

.charsheet button[type=action].button_xp:hover {
  color: var(--hover_bouton);
}

.charsheet button[type=roll].button_here_hero:hover {
  color: var(--hover_bouton);
}

.charsheet button[type=action].button_valider_creation:hover {
  background: #3c0c0cf2;
}

.charsheet button[type=action].button_valider_xp:hover {
  background: #3c0c0cf2;  
  border: 4px solid black;
  width: 532px;
  height: 112px;
}

.charsheet button[type=action].button0:hover,
.charsheet button[type=action].button1:hover,
.charsheet button[type=action].button2:hover,
.charsheet button[type=action].button3:hover,
.charsheet button[type=action].button4:hover,
.charsheet button[type=action].button5:hover,
.charsheet button[type=action].button6:hover,
.charsheet button[type=action].button7:hover,
.charsheet button[type=action].button8:hover,
.charsheet button[type=action].button9:hover {
  color: var(--color_text_hover);
}

.charsheet .choix_page[value="0"] ~ div .button0 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="1"] ~ div .button1 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="2"] ~ div .button2 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="3"] ~ div .button3 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="4"] ~ div .button4 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="6"] ~ div .button6 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="8"] ~ div .button8 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="9"] ~ div .button9 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}
.charsheet .choix_page[value="5"] ~ div .button5 {color: var(--color_text_button_selected); background: #65709f;}
.charsheet .choix_page[value="7"] ~ div .button7 {color: var(--color_text_button_selected); background: #65709f;}

.charsheet button[type=action].button_show:hover {
  color: var(--white);
}

.charsheet button[type=action].button_verrou:hover {
  color: red;
}

.charsheet button[type=action].button_annonce,
.charsheet button[type=roll].button_annonce {  
	padding: 0;
	margin: 0;
	box-shadow: none;
	text-shadow: none;
	background: none;
	width: 100%;
	text-align: center;
	border: none;
	border-radius: 1px;
	font-size: 19px;
	margin-top: -2px;
	font-family: "pictos";
	font-size: 16px;
	color: var(--text_input);
}

/* Affichage nouveau personnage */
div.nouveau_personnage,
div.obscuritas_perso,
div.menu {
    display: none;
}

.charsheet .nouveau_personnage[value="1"] ~ div.nouveau_personnage,
.charsheet .nouveau_personnage[value="0"] ~ div.obscuritas_perso,
.charsheet .nouveau_personnage[value="0"] ~ div.menu {
    display: block;
}

/* POPUP ALERTE SM */
div.sm_75,
div.sm_50,
div.sm_25 {
    display: none;
}

.charsheet .popup_sm[value="75"] ~ div.sm_75,
.charsheet .popup_sm[value="50"] ~ div.sm_50,
.charsheet .popup_sm[value="25"] ~ div.sm_25 {
    display: block;
}

.sm_75,
.sm_50,
.sm_25 {
  position: fixed;
  width: 600px;
  height: 300px;
  margin-left: 90px;
  margin-top: 110px;
  border: 8px solid #000000;
  border-radius: 30px;
  background: #5b0808;
  color: white;
  padding: 20px;
  z-index: 2;
  font-size: 25px;
  line-height: 55px;
  text-align: center;
  box-shadow: 0px 0px 30px 13px #330707;
}

.sm_75 {
  background: #071b67;
  box-shadow: 0px 0px 30px 13px #6c78ab;
}

.wrapper_page_sm {
  display: grid;
  grid-template-columns: 50% 5% 35% 5% 5%;
  grid-auto-rows: 20px;

}

.sm_alerte_texte {
  grid-column: 1;
  grid-row: 1 / 16;
  font-size: 20px;
  line-height: 30px;
  display: flex;
  align-items: center;
}

.sm_alerte_illustration_75 {
  grid-column: 3;
  grid-row: 1 / 16;
  height: 200px;
  border: 5px solid black;
  border-radius: 10px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/illu_sm_75.webp);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 47px;
}

.sm_alerte_illustration_50 {
  grid-column: 3;
  grid-row: 1 / 16;
  height: 200px;
  border: 5px solid black;
  border-radius: 10px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/illu_sm_50.webp);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 47px;
}

.sm_alerte_illustration_25 {
  grid-column: 3;
  grid-row: 1 / 16;
  height: 200px;
  border: 5px solid black;
  border-radius: 10px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/illu_sm_25.webp);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 47px;
}

.sm_alerte_bouton {
  grid-column: 5;
  grid-row: 1;
  font-family: 'Pictos';
  font-weight: normal;
  color: var(--white);
  font-size: 32px;
  line-height: 55px;
  margin-top: -25px;
  margin-left: 14px;
}

.menu {
  margin-top: -10px;
}

.creation_perso,
.page_complete,
.page_aura,
.page_caracteristiques,
.page_competences,
.page_equipement,
.page_magie,
.page_note,
.page_config,
.page_compendium,
.page_xp { 
  width: 820px;
  min-height: 1180px;
  height: auto;
  background: rgb(226, 226, 226);
  background-image: var(--background_page);
  background-size: contain;
  padding: 20px;
  border-radius: 10px;
  margin-left: -14px;
  box-shadow: var(--box_shadow_page);
  margin-bottom: 20px;
}

.creation_perso {
  height: 1295px !important;
  min-height: unset;
  background-image: var(--background_page);
  background-size: cover;
}

.page_aura {
  height: 820px !important;
  min-height: unset;
  background-image: var(--background_page);
  background-size: cover;
}

.page_caracteristiques {
  height: 560px !important;
  min-height: unset;
  background-image: var(--background_page);
  background-size: cover;
}

.page_competences {
  height: 720px !important;
  min-height: unset;
  background-image: var(--background_page);
  background-size: cover;
}

.page_equipement {
  height: 1360px !important;
  min-height: unset;
  background-image: var(--background_page);
  background-size: cover;
}

.page_note,
.page_magie {
  height: 1000px !important;
  min-height: unset;
  background-image: var(--background_page);
  background-size: cover;
}

.page_config {
  height: 490px !important;
  min-height: unset;
  background-image: var(--background_page);
  background-size: cover;
  padding-top: 60px;
}

.page_compendium {
  height: auto !important;
  min-height: 1180px;
  background-image: var(--background_page);
  background-size: contain;
}

.page_xp {
  height: 1135px !important;
  min-height: unset;
  background-image: var(--background_page);
  background-size: cover;
}


/* Affichage des page dynamique */
div.page_complete,
div.page_caracteristiques,
div.page_competences,
div.page_equipement,
div.page_magie,
div.page_note,
div.page_config,
div.page_aura,
div.page_compendium,
div.page_xp {
    display: none;
}

.charsheet .choix_page[value="0"] ~ div.page_complete,
.charsheet .choix_page[value="1"] ~ div.page_caracteristiques,
.charsheet .choix_page[value="2"] ~ div.page_competences,
.charsheet .choix_page[value="3"] ~ div.page_equipement,
.charsheet .choix_page[value="4"] ~ div.page_note,
.charsheet .choix_page[value="5"] ~ div.page_config,
.charsheet .choix_page[value="6"] ~ div.page_aura,
.charsheet .choix_page[value="7"] ~ div.page_compendium,
.charsheet .choix_page[value="8"] ~ div.page_xp,
.charsheet .choix_page[value="9"] ~ div.page_magie {
    display: block;
}

/* Affichage avatar */
div.info_avatar,
div.info_avatar_aude,
div.info_avatar_einarth,
div.info_avatar_felix,
div.info_avatar_baudoin,
div.info_avatar_mathilde,
div.info_avatar_robert {
    display: none;
}

.charsheet .choix_avatar[value="0"] ~ div.info_avatar,
.charsheet .choix_avatar[value="1"] ~ div.info_avatar_aude,
.charsheet .choix_avatar[value="2"] ~ div.info_avatar_einarth,
.charsheet .choix_avatar[value="3"] ~ div.info_avatar_felix,
.charsheet .choix_avatar[value="4"] ~ div.info_avatar_baudoin,
.charsheet .choix_avatar[value="5"] ~ div.info_avatar_mathilde,
.charsheet .choix_avatar[value="6"] ~ div.info_avatar_robert {
    display: flex;
}

/* Reduction des cadres */
div.cadre_info,
div.cadre_info_reduit,
div.cadre_hero,
div.cadre_hero_reduit,
div.cadre_caracteristiques,
div.cadre_caracteristiques_reduit,
div.cadre_competence,
div.cadre_competence_reduit,
div.cadre_armement,
div.cadre_armement_reduit,
div.cadre_inventaire,
div.cadre_inventaire_reduit {
  display: none;
}

.charsheet .voir_info[value="0"] ~ div.cadre_info,
.charsheet .voir_info[value="1"] ~ div.cadre_info_reduit,
.charsheet .voir_hero[value="0"] ~ div.cadre_hero,
.charsheet .voir_hero[value="1"] ~ div.cadre_hero_reduit,
.charsheet .voir_carac[value="0"] ~ div.cadre_caracteristiques,
.charsheet .voir_carac[value="1"] ~ div.cadre_caracteristiques_reduit,
.charsheet .voir_competence[value="0"] ~ div.cadre_competence,
.charsheet .voir_competence[value="1"] ~ div.cadre_competence_reduit,
.charsheet .voir_armement[value="0"] ~ div.cadre_armement,
.charsheet .voir_armement[value="1"] ~ div.cadre_armement_reduit,
.charsheet .voir_inventaire[value="0"] ~ div.cadre_inventaire,
.charsheet .voir_inventaire[value="1"] ~ div.cadre_inventaire_reduit {
    display: block;
}



/* Structure générale de la page_personnage */
/* Structure section */
/* Zone informations */
.wrapper_titre {
  display: grid;
  grid-template-columns: 45% 2% 48%;
  grid-auto-rows: 20px;
}

.titre_logo {
  grid-column: 1 / 4;
  grid-row: 1/10;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/logo.webp);
  background-repeat: no-repeat;
  background-size: contain;
}

.titre_titre {
  grid-column: 3;
  grid-row: 1 / 10;
  font-family: "Metamorphous", serif;
  font-size: 48px;
  font-weight: bold;
  line-height: 55px;
  display: inline-grid;
  align-content: center;
  text-align: center;
}

/* Zone Création personnage  */
.creation_entete {
  background: var(--black);
  color: var(--white);
  width: 55%;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 40px;
  margin-left: 20px;
}

.creation_carac_decompte {
  background: black;
  color: var(--white);
  width: 282px;
  height: 35px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
  border-radius: 5px;
  margin-top: 0px;
  transform: rotate(1deg);
}

.creation_comp_decompte {
  background: black;
  color: var(--white);
  width: 282px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 356px;
  border-radius: 5px;
  transform: rotate(-1deg);
}

.creation_valider {
  margin-left: 230px;
  margin-top: -15px;
  margin-bottom: 25px;
}

/* Zone XP personnage  */
.wrapper_page_xp {
  display: grid;
  grid-template-columns: repeat(83, 10px);
  grid-auto-rows: 30px;
}

div.xp_bloc_haut .wrapper_page_xp,
div.xp_bloc_bas .wrapper_page_xp {
  display: grid;
  grid-template-columns: repeat(83, 10px);
  grid-auto-rows: 20px;
}

.entete_xp {    
  grid-column: 1 / 59;
  grid-row: 1/7;
  background: black;
  color: var(--white);
  font-size: 12px;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 21px;
  text-align: center;
  transform: rotate(-0.3deg);
  box-shadow: 2px 1px 6px 2px #0000009c;
}

.valider_xp,
.erreur_xp {
  grid-column: 1 / 59;
  grid-row: 1/7;
  background: #22033c;
  color: var(--white);
  font-size: 12px;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;  
  font-size: 15px;
  line-height: 20px;
  font-family: "Metamorphous", serif;
  font-weight: bold;
  text-align: center;
  transform: rotate(-0.3deg);
  padding: 0;
  box-shadow: 2px 1px 6px 2px #0000009c;
}

.valider_xp {
  background: transparent;
}

.xp_disponible {    
  grid-column: 63 / 80;
  grid-row: 1/7;
  background: black;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 2px 1px 6px 2px #0000009c;
}

.xp_valider {
  grid-column: 65 / 75;
  grid-row: 1/5;
  background: black;
  color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper_tableau_xp {
  display: grid;
  grid-template-columns: 8% 26% 2% 10% 9% 13% 2% 5% 2% 10% 2% 5%;
  grid-auto-rows: 30px;
}

.wrapper_tableau_xp_derivees {
  display: grid;
  grid-template-columns: 5% 36% 2% 10% 9% 9% 2% 5% 2% 10% 2% 5%;
  grid-auto-rows: 30px;
}

.wrapper_tableau_comp {
  display: grid;
  grid-template-columns: 6% 36% 2% 10% 7% 10% 2% 5% 2% 10% 2% 5%;
  grid-auto-rows: 30px;
}

.xp_tableau_titre {
  grid-column: 2;
  grid-row: 1;  
  font-size: 14px;  
  display: flex;
  align-items: center;
}

.xp_tableau_valeur_base {
  grid-column: 4;
  grid-row: 1;
}

.xp_tableau_image_up {  
  grid-column: 6;
  grid-row: 1;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/double_fleche.webp);
  background-size: 20px auto;
  background-repeat: no-repeat;
  margin-top: 7px;
}

.xp_tableau_minus {
  grid-column: 8;
  grid-row: 1;
  font-family: 'picto';
}

.xp_tableau_valeur_up {
  grid-column: 10;
  grid-row: 1;
}

.xp_tableau_plus {
  grid-column: 12;
  grid-row: 1;
  font-family: 'picto';
}

.wrapper_xp_dispo {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  grid-auto-rows: 60px;
}

.xp_dispo_valeur {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.xp_dispo_texte {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-top: 2px solid var(--white);
}

.xp_titre_bloc {  grid-column: 1 / 28;
  grid-row: 1/3;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 20px;
  margin-right: 0px;
  background-image: var(--cadre_titre_gauche);
  background-size: cover;
  color: var(--white);
  font-family: "Metamorphous", serif;
  text-align: center;
  transform: rotate(1deg);
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
}

.xp_bloc_haut {
  grid-column: 1 / 80;
  grid-row: 1/7;
}

.xp_bloc_carac_deriv {
  grid-column: 1 / 80;
  grid-row: 6/16;
  background-image: var(--background_page);
  background-size: cover;
  border-radius: 10px;
  box-shadow: 2px 1px 6px 2px #0000009c;  
  transform: rotate(0.8deg);
}

.xp_bloc_carac {
  grid-column: 1 / 43;
  grid-row: 6/16;
  padding-top: 10px;
  z-index: 1;
}

.xp_bloc_separateur {
  grid-column: 44;
  grid-row: 9/15;
  border-left: 4px solid #000000ab;
  z-index: 1;
}

.xp_bloc_derivees {
  grid-column: 45/80;
  grid-row: 6/16;
  padding-top: 10px;  
  z-index: 1;
}

.xp_bloc_competences {
  grid-column: 1 / 80;
  grid-row: 17/31;
  background-image: var(--background_page);
  background-size: cover;
  padding-top: 10px;
  box-shadow: 2px 1px 6px 2px #0000009c;
  border-radius: 10px;
  transform: rotate(0.8deg);  
  margin-top: -10px;
}

.xp_block_comp_gauche {
  grid-column: 1 / 39;
  grid-row: 3/15;
  padding-top: 10px;
  z-index: 1;  
  margin-top: 20px;
}

.xp_block_comp_separateur {
  grid-column: 40;
  grid-row: 2/15;
  padding-top: 10px;
  border-left: 4px solid #000000ab;
  z-index: 1;
  margin-top: 40px;
  margin-bottom: 15px;
}

.xp_block_comp_droite {
  grid-column: 41/80;
  grid-row: 3/15;
  padding-top: 10px;
  z-index: 1; 
  margin-top: 20px;
}

.xp_bloc_bas {
  grid-column: 1 / 80;
  grid-row: 32/37;
}

/* Boutton valider xp */
div.valider_xp,
div.erreur_xp {
    display: none;
}

.charsheet .test_xp[value="0"] ~ div.valider_xp,
.charsheet .test_xp[value="1"] ~ div.erreur_xp {
    display: flex;
}

/* SLIDER GM */
span.classic {
	color: #000000de;
}

span.cache {
	color: var(--text_input_info);
}

.charsheet input.sheet-prouesse-switch {
	display: none;
}


.charsheet .classic,
.charsheet .cache
{
	display: none;
}

.pouvoir_data .prouesse_roll {
	display: inline-block;
}

.charsheet input.sheet-prouesse-switch {
	display: none;
}

input.sheet-prouesse-switch:not(:checked) ~ span.classic,
input.sheet-prouesse-switch:checked ~  span.cache {
    display: inline-block;
}

.slider_prouesse {
  display: inline-block;
  cursor: pointer;
  background-color: #61504500;
  -webkit-transition: .2s;
  transition: .2s;
  width: 30px;
  height: 15px;
  padding: 2px;
  border: 1px solid #000000de;
  box-shadow: 3px 2px 5px #435861ba;
  margin-top: -2px;
  margin-left: 46px;
}


.slider_prouesse:before {
  display: inline-block;
  content: "";
  background-color: #000000de;
  -webkit-transition: .2s;
  transition: .2s;
  width: 15px;
  height: 15px;
}

input:checked + .slider_prouesse:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
    background-color: var(--text_input_info);
}

/* Rounded sliders */
.slider_prouesse.round_prouesse {
  border-radius: 34px;
}

.slider_prouesse.round_prouesse:before {
  border-radius: 50%;
}


/* Zone AURA */

/* Affichage dynamique marqueur */
div.marqueur_aura_0,
div.marqueur_aura_1,
div.marqueur_aura_2,
div.marqueur_aura_3,
div.marqueur_aura_4,
div.marqueur_aura_5,
div.marqueur_aura_6,
div.marqueur_aura_7,
div.marqueur_aura_8,
div.marqueur_aura_9,
div.marqueur_aura_10,
div.marqueur_aura_n1,
div.marqueur_aura_n2,
div.marqueur_aura_n3,
div.marqueur_aura_n4,
div.marqueur_aura_n5,
div.marqueur_aura_n6,
div.marqueur_aura_n7,
div.marqueur_aura_n8,
div.marqueur_aura_n9,
div.marqueur_aura_n10 {
  display: none;
}

.charsheet .niveau_aura[value="0"] ~ div.marqueur_aura_0,
.charsheet .niveau_aura[value="1"] ~ div.marqueur_aura_1,
.charsheet .niveau_aura[value="2"] ~ div.marqueur_aura_2,
.charsheet .niveau_aura[value="3"] ~ div.marqueur_aura_3,
.charsheet .niveau_aura[value="4"] ~ div.marqueur_aura_4,
.charsheet .niveau_aura[value="5"] ~ div.marqueur_aura_5,
.charsheet .niveau_aura[value="6"] ~ div.marqueur_aura_6,
.charsheet .niveau_aura[value="7"] ~ div.marqueur_aura_7,
.charsheet .niveau_aura[value="8"] ~ div.marqueur_aura_8,
.charsheet .niveau_aura[value="9"] ~ div.marqueur_aura_9,
.charsheet .niveau_aura[value="10"] ~ div.marqueur_aura_10,
.charsheet .niveau_aura[value="-1"] ~ div.marqueur_aura_n1,
.charsheet .niveau_aura[value="-2"] ~ div.marqueur_aura_n2,
.charsheet .niveau_aura[value="-3"] ~ div.marqueur_aura_n3,
.charsheet .niveau_aura[value="-4"] ~ div.marqueur_aura_n4,
.charsheet .niveau_aura[value="-5"] ~ div.marqueur_aura_n5,
.charsheet .niveau_aura[value="-6"] ~ div.marqueur_aura_n6,
.charsheet .niveau_aura[value="-7"] ~ div.marqueur_aura_n7,
.charsheet .niveau_aura[value="-8"] ~ div.marqueur_aura_n8,
.charsheet .niveau_aura[value="-9"] ~ div.marqueur_aura_n9,
.charsheet .niveau_aura[value="-10"] ~ div.marqueur_aura_n10 {
    display: flex;
}

.marqueur_aura_0,
.marqueur_aura_1,
.marqueur_aura_2,
.marqueur_aura_3,
.marqueur_aura_4,
.marqueur_aura_5,
.marqueur_aura_6,
.marqueur_aura_7,
.marqueur_aura_8,
.marqueur_aura_9,
.marqueur_aura_10,
.marqueur_aura_n1,
.marqueur_aura_n2,
.marqueur_aura_n3,
.marqueur_aura_n4,
.marqueur_aura_n5,
.marqueur_aura_n6,
.marqueur_aura_n7,
.marqueur_aura_n8,
.marqueur_aura_n9,
.marqueur_aura_n10 {
  grid-column: 35 / 44;
  grid-row: 8 / 17;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_marque.webp);
  background-size: 85px 85px;
  background-repeat: no-repeat;
  margin-top: 2px;
  margin-left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marqueur_aura_1 {
  grid-column: 38 / 47;
}

.marqueur_aura_2 {
  grid-column: 41 / 50;
}

.marqueur_aura_3 {
  grid-column: 43 / 52;
}

.marqueur_aura_4 {
  grid-column: 45 / 54;
}

.marqueur_aura_5 {
  grid-column: 48 / 57;
}

.marqueur_aura_6 {
  grid-column: 51 / 60;
}

.marqueur_aura_7 {
  grid-column: 53 / 62;
}

.marqueur_aura_8 {
  grid-column: 56 / 65;
}

.marqueur_aura_9 {
  grid-column: 58 / 67
}

.marqueur_aura_10 {
  grid-column: 61 / 70;
}

.marqueur_aura_n1 {
  grid-column: 32 / 41;
}

.marqueur_aura_n2 {
  grid-column: 29 / 38;
}

.marqueur_aura_n3 {
  grid-column: 27 / 36;
}

.marqueur_aura_n4 {
  grid-column: 25 / 34;
}

.marqueur_aura_n5 {
  grid-column: 22 / 31;
}

.marqueur_aura_n6 {
  grid-column: 19 / 28;
}

.marqueur_aura_n7 {
  grid-column: 17 / 26;
}

.marqueur_aura_n8 {
  grid-column: 14 / 23;
}

.marqueur_aura_n9 {
  grid-column: 12 / 21;
}

.marqueur_aura_n10 {
  grid-column: 10 / 19;
}

.background_aura {    
  grid-column: 16 / 62;
  grid-row: 13 / 33;
  background-repeat: no-repeat;
  margin-right: -2px;
  margin-left: 6px;
  border-radius: 0px 0px 90px 90px;
  border: 2px solid var(--black);
  box-shadow: 1px 3px 9px 4px #000000c9;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_fond2.webp);
  background-size: 456px 200px;
}

.background_aura_heresie {  
  grid-column: 22 / 34;
  grid-row: 13 / 33;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/heresie_illustration.webp);
  background-size: 107px 200px;
  background-repeat: no-repeat;
}

.background_aura_heroisme {  
  grid-column: 46 / 62;
  grid-row: 13 / 33;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/heroisme_illustration.webp);
  background-size: 107px 200px;
  background-repeat: no-repeat;
}

.barre_aura {
  grid-column: 10 / 80;
  grid-row: 4 / 18;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_jauge_2.webp);
  background-size: 600px 173px;
  background-repeat: no-repeat;
}

.ange_aura {
  grid-column: 67 / 83;
  grid-row: 3 / 19;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_ange4.webp);
  background-size: 103px 145px;
  background-repeat: no-repeat;
  margin-top: 0px;
  margin-left: 40px;
}

.centre_aura {
  grid-column: 32 / 80;
  grid-row: 1 / 14;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_centre.webp);
  background-size: 135px 135px;
  background-repeat: no-repeat;
  margin-top: -61px;
  margin-left: 8px;
}

.demon_aura {
  grid-column: 1 / 80;
  grid-row: 4 / 19;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_demon.webp);
  background-size: 100px 128px;
  background-repeat: no-repeat;
  margin-top: 3px;
  margin-left: -12px;
}

.obscuritas {
  grid-column: 6 / 80;
  grid-row: 1;
  font-size: 45px;
  margin-top: -58px;
  letter-spacing: -1.5px;
  font-weight: bold;
}

.aeterna {
  grid-column: 49 / 80;
  grid-row: 1;
  font-size: 45px;
  margin-top: -58px;
  letter-spacing: 2.5px;
  font-weight: bold;
}

.boutton_aura,
.boutton_aura_physique {
  grid-column: 32 / 47;
  grid-row: 19 / 25;
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* Zone informations */
.wrapper_zone_info {
  display: grid;
  grid-template-columns: 70% 2% 28%;
  grid-auto-rows: 20px;
  margin-top: 2px;
}

.info_data {
  grid-column: 1/4;
  grid-row: 1;
}

.info_titre {
  grid-column: 1/4;
  grid-row: 2;
  font-weight: bold;
  font-family: "Metamorphous", serif;
  font-size: 10px;
}

.info_demi_data_gauche {
  grid-column: 1;
  grid-row: 1;
}

.info_demi_titre_gauche {
  grid-column: 1;
  grid-row: 2;
  font-weight: bold;
  font-family: "Metamorphous", serif;
  font-size: 10px;
}

.info_demi_data_droite {
  grid-column: 3;
  grid-row: 1;
}

.info_demi_titre_droite {
  grid-column: 3;
  grid-row: 2;
  font-weight: bold;
  font-family: "Metamorphous", serif;
  font-size: 10px;
}

.info_avatar,
.info_avatar_aude,
.info_avatar_einarth,
.info_avatar_felix,
.info_avatar_baudoin,
.info_avatar_mathilde,
.info_avatar_robert,
.info_avatar_obscuritas,
.zone_bouton_avatar {
  display: flex;
  vertical-align: middle;
  align-items: center;
  grid-row: 1 / 11;
  grid-column: 1 / 4;
  height: 170px;
  width: 170px;
  margin-top: 18px;
  border-radius: 90px;
}

.info_avatar_aude {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_aude1.webp);
  background-size: 170px 170px;
}


.info_avatar_einarth {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_einarth1.webp);
  background-size: 170px 170px;
}


.info_avatar_felix {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_felix1.webp);
  background-size: 170px 170px;
}

.info_avatar_baudoin {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_baudoin1.webp);
  background-size: 170px 170px;
}

.info_avatar_mathilde {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_mathilde1.webp);
  background-size: 170px 170px;
}

.info_avatar_robert {
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/token_robert1.webp);
  background-size: 170px 170px;
}

.info_avatar_obscuritas {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/token_obscuritas.png);
  background-size: 170px 170px;
}


.wrapper_page_personnage {
  display: grid;
  grid-template-columns: repeat(83, 10px);
  grid-auto-rows: 10px;
}

.wrapper_page_1 {
  display: grid;
  grid-template-columns: repeat(83, 1fr); /* Colonnes dynamiques */
  grid-auto-rows: auto; /* Lignes ajustées au contenu */
  gap: 10px; /* Espacement entre les colonnes et les lignes */
  width: 100%; /* Adapte la largeur totale à celle du conteneur parent */
  box-sizing: border-box; /* Inclut le padding/border dans la largeur */
}

.cadre_titre {
  grid-column: 6 / 79;
  grid-row: 1 / 22;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 23px 9px #000000fc;
  background: #ffffff52;
  border-radius: 10px;
  margin-bottom: 25px;
  margin-top: 20px;
}

.cadre_aura {
  grid-column: 2 / 83;
  padding: 10px;
  background: transparent;
  border-radius: 90px;
  margin-top: 70px;
  margin-bottom: -15px;
  background-size: contain;
  background-blend-mode: lighten;
}

.cadre_info,
.cadre_info_reduit {
  grid-column: 1 / 83;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px #000000c4;
  background: #ffffff52;
  border-radius: 10px;
  margin-top: 15px;
  background-image: var(--esoterik_info);
  background-size: contain;
  /* background-blend-mode: lighten; */
  margin-top: 30px;
}

.cadre_hero,
.cadre_hero_reduit {
  grid-column: 1 / 83;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px #000000c4;
  background: #ffffff52;
  border-radius: 10px;
  margin-top: 15px;
  background-image: var(--esoterik_equipement);
  background-size: contain;
  /* background-blend-mode: lighten; */
}

.cadre_caracteristiques,
.cadre_caracteristiques_reduit {
  grid-column: 1 / 83;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px #000000c4;
  background: #ffffff52;
  border-radius: 10px;
  margin-top: 15px;
  background-image: var(--esoterik_carac);
  background-size: contain;
  background-blend-mode: lighten;
}

.cadre_competence,
.cadre_competence_reduit {
  grid-column: 1 / 83;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px #000000c4;
  background: #ffffff52;
  border-radius: 10px;
  margin-top: 15px;
  background-image: var(--esoterik_competences);
  background-size: contain;
  background-blend-mode: lighten;
}

.cadre_armement,
.cadre_armement_reduit {
  grid-column: 1 / 83;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px #000000c4;
  background: #ffffff52;
  border-radius: 10px;
  margin-top: 15px;
  background-image: var(--esoterik_equipement);
  background-size: contain;
  background-blend-mode: lighten;
}

.cadre_inventaire,
.cadre_inventaire_reduit {
  grid-column: 1 / 83;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px #000000c4;
  background: #ffffff52;
  border-radius: 10px;
  margin-top: 15px;
  background-image: var(--esoterik_equipement);
  background-size: contain;
  background-blend-mode: lighten;
}

.cadre_carnet {
  grid-column: 1 / 83;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px #000000c4;
  background: #ffffff52;
  border-radius: 10px;
  margin-top: 15px;
  background-image: var(--esoterik_equipement);
  background-size: contain;
  background-blend-mode: lighten;
}

.cadre_xp,
.cadre_creation {
  grid-column: 1 / 83;
  border: 2px solid #00000087;
  padding: 10px;
  box-shadow: 0px 0px 5px 2px #000000c4;
  background: #ffffff52;
  border-radius: 10px;
  margin-top: 15px;
  background-image: var(--esoterik_carac);
  background-size: contain;
  background-blend-mode: lighten;
}

.wrapper_zone_personnage {
  display: grid;
  grid-template-columns: repeat(83, 10px);
  grid-auto-rows: 10px;
}

.zone_info_titre,
.zone_hero_titre,
.zone_caracteristiques_titre,
.zone_competence_titre,
.zone_armement_titre,
.zone_inventaire_titre,
.zone_carnet_titre,
.zone_compendium_titre {
  grid-column: 1 / 36;
  grid-row: 1 / 4;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background-image: var(--cadre_titre_gauche);
  background-size: cover;
  margin-top: -33px;
  margin-bottom: 12px;
  color: var(--white);
  font-family: "Metamorphous", serif;
  display: flex;
  align-content: center;
  vertical-align: middle;
  text-align: center;
  padding-left: 90px;
  padding-top: 18px;
  transform: rotate(1deg);
  font-size: 22px;
}

.zone_hero_titre,
.zone_competence_titre,
.zone_inventaire_titre {
  grid-column: 45 / 79;
  grid-row: 1 / 4;
  background-image: var(--cadre_titre_droite);
  padding-left: 31px;
  padding-top: 18px;
  transform: rotate(-1deg);
}

.zone_info_gauche {
  grid-column: 1 / 31;
  grid-row: 4 / 27;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.zone_info_avatar {
  grid-column: 32 / 49;
  grid-row: 4 / 27;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.zone_info_background {
  grid-column: 1 / 80;
  grid-row: 28 / 39;
  margin-top: -8px;
  margin-bottom: 0px;
  margin-left: 80px;
  margin-right: 80px;
}

.zone_info_droite {
  grid-column: 49 / 80;
  grid-row: 4 / 27;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 5px;
  text-align: right;
}


/* HEROISME */
/* Affichage dynamique marqueur */
div.niveau_aura_0,
div.niveau_aura_1,
div.niveau_aura_2,
div.niveau_aura_3,
div.niveau_aura_m1,
div.niveau_aura_m2,
div.niveau_aura_m3 {
  display: none;
  grid-column: 1 / 4;
  grid-row: 1 / 25;
}

.charsheet .valeur_aura[value="0"] ~ div.niveau_aura_0,
.charsheet .valeur_aura[value="1"] ~ div.niveau_aura_1,
.charsheet .valeur_aura[value="2"] ~ div.niveau_aura_2,
.charsheet .valeur_aura[value="3"] ~ div.niveau_aura_3,
.charsheet .valeur_aura[value="-1"] ~ div.niveau_aura_m1,
.charsheet .valeur_aura[value="-2"] ~ div.niveau_aura_m2,
.charsheet .valeur_aura[value="-3"] ~ div.niveau_aura_m3 {
    display: flex;
}

.zone_hero_info {
  grid-column: 2 / 43;
  grid-row: 3 / 12;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  font-size: 12px;
}

.zone_hero_here_aura_hero {
  grid-column: 1 / 80;
  grid-row: 8 / 31;
  box-shadow: 0px 0px 12px 6px #000000c4;
  margin-left: 50px;
  margin-right: 50px;
  border-radius: 30px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_fond2.webp);
  background-size: 690px 226px;
  border: 2px solid black;
  color: var(--white);
}

.wrapper_zone_hero_here_aura_hero {
  display: grid;
  grid-template-columns: 33% 34% 33%;
  grid-auto-rows: 60px;
}

.hero_titre_heresie {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: end;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  background: #4a2a27;
  margin-right: -23px;
  border-radius: 25px 0px 25px 0px;
  border: 2px solid #000000;
  padding-right: 31px;
}

.hero_heresie_data  {
  grid-column: 1/3;
  grid-row: 2 / 4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
  margin-left: -74px;
}

.hero_heresie_illu  {
  grid-column: 1;
  grid-row: 1 / 6;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -3px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/heresie_illustration.webp);
  background-size: 107px 230px;
  background-repeat: no-repeat;
  margin-left: 5px;
}

.hero_titre_aura,
.hero_titre_aura_physique {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-size: 20px;
  font-weight: bold;
}

.hero_aura_data_habillage {
  grid-column: 2;
  grid-row: 2 / 3;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/aura_marque.webp);
  background-size: 100px 100px;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 67px;
  width: 100px;
  height: 100px;
  margin-top: 25px;
}

.hero_titre_heroisme {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: bold;
  background: #424b6f;
  margin-left: -30px;
  border-radius: 0px 25px 0px 25px;
  border: 2px solid #000000;
  padding-left: 20px;
}

.hero_heroisme_data  {
  grid-column: 3;
  grid-row: 2 / 4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
  margin-left: -170px;
}

.hero_heroisme_illu {
  grid-column: 3;
  grid-row: 1 / 6;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -3px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/heroisme_illustration.webp);
  background-size: 107px 230px;
  background-repeat: no-repeat;
  margin-left: 110px;
}

.zone_hero_gauche {
  grid-column: 1 / 28;
  grid-row: 26 / 76;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.zone_hero_aura {
  grid-column: 25/54;
  grid-row: 26 / 78;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.zone_hero_droite {
  grid-column: 53 / 80;
  grid-row: 26 / 76;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 5px;
}

.wrapper_zone_hero {
  display: grid;
  grid-template-columns: 27% 0% 73%;
  grid-auto-rows: 20px;
}

.hero_data {
  grid-column: 1/4;
  grid-row: 1;
}

.hero_titre {
  grid-column: 1/4;
  grid-row: 2;
  font-weight: bold;
  font-family: "Metamorphous", serif;
  font-size: 10px;
}

.hero_aura_data {
  grid-column: 1 / 4;
  grid-row: 1 / 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero_aura_titre_effet {
  grid-column: 1 / 4;
  grid-row: 1/3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero_tableau_cout,
.hero_tableau_cout_4,
.hero_tableau_cout_7 {
  grid-column: 1;
  grid-row: 1/5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  line-height: 16px;
  padding: 5px;
  border: 1px solid black;
  border-bottom: none;
}

.hero_tableau_cout_4 {
  grid-row: 1/6;
}

.hero_tableau_cout_7 {
  grid-row: 1 / 7;
}

.hero_tableau_effet,
.hero_tableau_effet_4,
.hero_tableau_effet_7 {
  grid-column: 3;
  grid-row: 1 / 5;
  display: flex;
  justify-content: center;
  font-size: 10px;
  line-height: 14px;
  padding: 5px;
  align-items: center;
  border: 1px solid black;
  border-left: none;
  border-bottom: none;
}

.hero_tableau_effet_4 {
  grid-row: 1 / 6;
}

.hero_tableau_effet_7 {
  grid-row: 1 / 7;
}

.habillage_tableau {
  grid-column: 1 / 4;
  grid-row: 6 / 25;
  background-image: var(--background_page);
  background-size: cover;
  box-shadow: 1px 2px 7px 1px #000000c4;
  border: 1px solid black;
  border-radius: 10px 10px 0px 0px;
}


/* CARACTERISTIQUES */
.wrapper_zone_carac {
  display: grid;
  grid-template-columns: repeat(auto-fill, 5px);
  grid-auto-rows: 60px;
}

.switch_dice_slider {
	grid-column: 70;
	grid-row: 1;
}

.switch_dice_slider_data {
  grid-column: 64 / 74;
  grid-row: 1;
  font-size: 10px;
  text-align: right;
  font-weight: bold;
}

.switch_dice_slider_comp {
  grid-column: 70;
  grid-row: 3;
}

.switch_dice_slider_data_comp {
  grid-column: 66 / 74;
  grid-row: 3;
  font-size: 11px;
  text-align: right;
  font-weight: bold;
}

.bloc_pentacle {
  grid-column: 1 / 91;
  grid-row: 1 / 9;
  margin-top: 25px;
  margin-bottom: 30px;
  margin-left: 0px;
  margin-right: 0px;
}

.caracteristiques_pentacle {
  grid-column: 15/75;
  grid-row: 2/7;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
  background-image: var(--hexagramme);
  background-size: contain;
}

.caracteristiques_force_data {
  grid-column: 37 / 53;
  grid-row: 1 / 3;
  width: 76px;
  height: 72px;
  margin-top: 12px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
  background-image: var(--cadre_input_carac);
  background-size: contain;
  background-repeat: no-repeat;
}

.caracteristiques_dexterite_data {
  grid-column: 9;
  grid-row: 2;
  width: 76px;
  height: 72px;
  margin-top: 6px;
  margin-bottom: 0px;
  margin-left: 3px;
  margin-right: 0px;
  text-align: center;
  background-image: var(--cadre_input_carac);
  background-size: contain;
  background-repeat: no-repeat;
}

.caracteristiques_constitution_data {
  grid-column: 66;
  grid-row: 2;
  width: 76px;
  height: 72px;
  margin-top: 6px;
  margin-bottom: 0px;
  margin-left: -6px;
  margin-right: 0px;
  text-align: center;
  background-image: var(--cadre_input_carac);
  background-size: contain;
  background-repeat: no-repeat;
}

.caracteristiques_intelligence_data {
  grid-column: 69;
  grid-row: 5;
  width: 76px;
  height: 72px;
  margin-top: 4px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
  background-image: var(--cadre_input_carac);
  background-size: contain;
  background-repeat: no-repeat;
}

.caracteristiques_charisme_data {
  grid-column: 6;
  grid-row: 5;
  width: 76px;
  height: 72px;
  margin-top: 4px;
  margin-bottom: 0px;
  margin-left: 2px;
  margin-right: 0px;
  text-align: center;
  background-image: var(--cadre_input_carac);
  background-size: contain;
  background-repeat: no-repeat;
}

.caracteristiques_volonte_data {
  grid-column: 37;
  grid-row: 6;
  width: 76px;
  height: 72px;
  margin-top: 40px;
  margin-bottom: 0px;
  margin-left: 2px;
  margin-right: 0px;
  text-align: center;
  background-image: var(--cadre_input_carac);
  background-size: contain;
  background-repeat: no-repeat;
}

.caracteristiques_force_titre,
.caracteristiques_force_titre_physique,
.caracteristiques_force_titre_creation {
  grid-column: 30;
  grid-row: 1;
  width: 150px;
  height: 25px;
  margin-top: -15px;
  margin-bottom: 0px;
  margin-left: -3px;
  margin-right: 0px;
  text-align: center;
}

.caracteristiques_dexterite_titre,
.caracteristiques_dexterite_titre_physique,
.caracteristiques_dexterite_titre_creation {
  grid-column: 3;
  grid-row: 1;
  width: 150px;
  height: 25px;
  margin-top: 41px;
  margin-bottom: 0px;
  margin-left: -7px;
  margin-right: 0px;
  text-align: center;
}

.caracteristiques_constitution_titre,
.caracteristiques_constitution_titre_physique,
.caracteristiques_constitution_titre_creation {
  grid-column: 59;
  grid-row: 1;
  width: 150px;
  height: 25px;
  margin-top: 41px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
}

.caracteristiques_intelligence_titre,
.caracteristiques_intelligence_titre_physique,
.caracteristiques_intelligence_titre_creation {
  grid-column: 64;
  grid-row: 7;
  width: 150px;
  height: 25px;
  margin-top: -43px;
  margin-bottom: 0px;
  margin-left: -11px;
  margin-right: 0px;
  text-align: center;
}

.caracteristiques_charisme_titre,
.caracteristiques_charisme_titre_physique,
.caracteristiques_charisme_titre_creation {
  grid-column: 1;
  grid-row: 7;
  width: 150px;
  height: 25px;
  margin-top: -43px;
  margin-bottom: 0px;
  margin-left: -13px;
  margin-right: 0px;
  text-align: center;
}

.caracteristiques_volonte_titre,
.caracteristiques_volonte_titre_physique,
.caracteristiques_volonte_titre_creation {
  grid-column: 30;
  grid-row: 8;
  width: 150px;
  height: 25px;
  margin-top: -9px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  text-align: center;
}

.caracteristiques_separateur {
  grid-column: 82;
  grid-row: 1 / 4;
  width: 111px;
  height: 510px;
  margin-top: -41px;
  margin-bottom: 0px;
  margin-left: -3px;
  margin-right: 0px;
  background-image: var(--separateur_vertical_carac);
  background-size: cover;
}

.caracteristiques_separateur_creation {
    grid-column: 82;
    grid-row: 1 / 4;
    width: 86px;
    height: 385px;
    margin-top: -39px;
    margin-bottom: 0px;
    margin-left: 12px;
    margin-right: 0px;
    background-image: var(--separateur_vertical_carac);
    background-size: cover;
}

.caracteristiques_derivees {
  grid-column: 93 / 156;
  grid-row: 1 / 8;
  margin-top: 0px;
  margin-bottom: -31px;
  margin-left: 1px;
  margin-right: 0px;
  box-shadow: 2px 1px 6px 2px #0000009c;
  padding: 20px;
  padding-left: 35px;
  border-radius: 0px 5px 5px 0px;
  background-image: var(--background_page);
  background-size: cover;
}

.wrapper_zone_derivees {
  display: grid;
  grid-template-columns: 0% 66% 1% 10% 2% 10% 4% 10% 0%;
  grid-auto-rows: 30px;
  font-size: 24px;
  font-family: "Jim Nightshade";
}

.derivees_titre,
.derivees_titre_roll,
.derivees_titre_roll_physique {
  grid-column: 2;
  grid-row: 1;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

.derivees_data {
  grid-column: 4;
  grid-row: 1;
  margin-top: -4px;
  margin-bottom: 0px;
  margin-left: -10px;
  margin-right: 0px;
}

.derivees_sur {
  grid-column: 6;
  grid-row: 1;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  font-size: 15px;
}

.derivees_max {
  grid-column: 8;
  grid-row: 1;
  margin-top: -4px;
  margin-bottom: 0px;
  margin-left: -10px;
  margin-right: 0px;
}

.derivees_bonus {
  grid-column: 4 / 9;
  grid-row: 1;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  display: flex;
  justify-content: center;
}

.derivees_separateur {
  grid-column: 1;
  grid-row: 1;
  margin-top: 2px;
  margin-bottom: 0px;
  margin-left: -8px;
  margin-right: 0px;
  background-image: var(--separateur_horizontal_carac);
  background-size: contain;
  height: 13px;
  width: 276px;
}




/* COMPETENCES */
.wrapper_zone_competence {
  display: grid;
  grid-template-columns: 6% 43% 1% 45% 0%;
  grid-auto-rows: 32px;
}

.competence_gauche {
  grid-column: 2;
  grid-row: 2 / 21;
  transform: rotate(-0.8deg);
  box-shadow: -4px 3px 6px 4px #0000009c;
  border-radius: 15px 0px 0px 15px;
  margin: -4px;
  padding: 15px;
  padding-left: 30px;
  margin-top: 9px;
  margin-bottom: 15px;
  background-image: var(--background_page);
  background-size: cover;
}

.competence_droite {
  grid-column: 4;
  grid-row: 2 / 21;
  transform: rotate(-0.8deg);
  box-shadow: 4px 3px 6px 4px #000000c4;
  border-radius: 0px 15px 15px 0px;
  margin: -4px;
  padding: 15px;
  padding-left: 30px;
  margin-top: 5px;
  background-image: var(--background_page);
  background-size: cover;
  background-position: 25% 75%;
  margin-bottom: 20px;
}

.competence_crane {
  grid-column: 3;
  grid-row: 1/4;
  background-image: var(--separateur_crane_competence);
  background-size: contain;
  margin-top: -40px;
  margin-left: -36px;
  width: 81px;
  transform: rotate(-1deg);
  height: 115px;
}

.competence_separateur_centre {
  grid-column: 3;
  grid-row: 1 / 19;
  background-image: var(--separateur_centre_competence);
  background-size: cover;
  margin-top: -56px;
  margin-left: -12px;
  width: 25px;
  transform: rotate(-0.6deg);
  height: 110%;
}

.competence_separateur_bas {
  grid-column: 3;
  grid-row: 17 / 21;
  background-image: var(--separateur_croix_competence);
  background-size: cover;
  margin-top: 32px;
  margin-left: -26px;
  width: 65px;
  transform: rotate(-1deg);
  height: 94%;
}

.wrapper_tableau_competence {
  display: grid;
  grid-template-columns: 12% 0% 68% 0% 17% 0%;
  grid-auto-rows: 17px;
  font-size: 13px;
  font-family: 'Metamorphous';
  margin-top: 5px;
}

.competence_valeur_simple,
.competence_valeur_simple_custom,
.competence_valeur_simple_physique,
.competence_valeur_simple_custom_physique {
  grid-column: 1;
  grid-row: 1;
  height: 37px;
  width: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -1px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/cercle_carac.webp);
  background-size: 37px 37px;
  background-repeat: no-repeat;
}

.competence_valeur_double {
  grid-column: 1;
  grid-row: 1 / 3;
  height: 71px;
  width: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0px;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/cercle_carac.webp);
  background-size: 37px 71px;
  background-repeat: no-repeat;
}

.competence_nom_double,
.competence_nom_double_physique,
.competence_nom_double_crea {
  grid-column: 3;
  grid-row: 1/3;
  border-bottom: none;
  display: flex;
  align-items: center;
  padding: 5px;
  padding-left: 10px;
  padding-right: 0px;
  border-bottom: 1px dotted #00000042;
}

.competence_nom_haut {
  grid-column: 3;
  grid-row: 1;
  border-bottom: none;
  display: flex;
  align-items: center;
  padding: 5px;
  padding-left: 10px;
}

.competence_nom_bas {
  grid-column: 3;
  grid-row: 2;
  border-bottom: none;
  display: flex;
  align-items: center;
  padding: 5px;
  padding-left: 10px;
  border-bottom: 1px dotted #00000042;
}

.competence_final_double {
  grid-column: 5;
  grid-row: 1 / 3;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/carre_carac_finale.webp);
  background-repeat: no-repeat;
  background-size: 35px 35px;
}

.competence_final_haut {
  grid-column: 5;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px dotted black;
}

.competence_final_bas {
  grid-column: 5;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px dotted black;
  border-right: 1px dotted black;
  border-radius: 0px 0px 15px 0px;
}


/* ARMEMENT */
.wrapper_zone_armement {
  display: grid;
  grid-template-columns: 6% 43% 1% 45% 0%;
  grid-auto-rows: 32px;
}

.bloc_armes {
  grid-column: 1 / 6;
  grid-row: 1 / 14;
  margin: -4px;
  margin-top: 9px;
  margin-bottom: 30px;
  margin-left: 5px;
  margin-right: -32px;
  padding: 10px;
  padding-left: 10px;
  transform: rotate(0.8deg);
  box-shadow: -4px 3px 6px 4px #0000009c;
  border-radius: 15px;
  background-image: var(--background_page);
  background-size: cover;
  margin-bottom: 20px;
}

.bloc_armures {  
  grid-column: 1 / 6;
  grid-row: 14 / 30;
  margin: -4px;
  margin-top: 9px;
  margin-bottom: 30px;
  margin-left: 5px;
  margin-right: -32px;
  padding: 15px;
  padding-left: 30px;
  transform: rotate(-0.4deg);
  box-shadow: -4px 3px 6px 4px #0000009c;
  border-radius: 15px;
  background-image: var(--background_page);
  background-size: cover;
  margin-bottom: 20px;
}

.bloc_boucliers {
  grid-column: 1 / 6;
  grid-row: 30 / 40;
  margin: -4px;
  margin-top: 9px;
  margin-bottom: 30px;
  margin-left: 5px;
  margin-right: -32px;
  padding: 15px;
  padding-left: 30px;
  transform: rotate(0.8deg);
  box-shadow: -4px 3px 6px 4px #0000009c;
  border-radius: 15px;
  background-image: var(--background_page);
  background-size: cover;
  margin-bottom: 20px;
}

.bloc_inventaire {
  grid-column: 1 / 91;
  grid-row: 45 / 55;
  margin-top: 0px;
  margin-bottom: 30px;
  margin-left: 0px;
  margin-right: 0px;
  background: red;
}

.illustration_armes,
.illustration_boucliers,
.illustration_inventaire {  
  height: 56px;
  margin-bottom: 15px;
  background-image: var(--armes_image_1);
  background-size: 429px 55px;
  margin-left: 150px;
  margin-right: 150px;
  background-repeat: no-repeat;
  transform: rotate(-1.5deg);
}

.wrapper_zone_armes,
.wrapper_zone_armes_titre {
  display: grid;
  grid-template-columns: 19% 1% 20% 1% 7% 1% 6% 2% 35% 1% 6%;
  grid-auto-rows: 25px;
  text-align: center;
  font-size: 12px;
}

.wrapper_zone_armes_titre {
  grid-auto-rows: 30px;
  line-height: 30px;
  border: none;
  background-image: var(--armes_barre_titre);
  color: var(--white);
  font-weight: bold;
  font-size: 12px;
  background-size: cover;
}

.wrapper_zone_armes_separateur {
  display: grid;
  grid-template-columns: 14% 1% 20% 3% 7% 3% 6% 3% 35% 1% 6%;
  grid-auto-rows: 10px;
}

.armes_type_unlock_1,
.armes_type_unlock_2,
.armes_type_unlock_3,
.armes_type_unlock_4,
.armes_type_lock_1,
.armes_type_lock_2,
.armes_type_lock_3,
.armes_type_lock_4,
.armes_cadenas_unlock_1,
.armes_cadenas_unlock_2,
.armes_cadenas_unlock_3,
.armes_cadenas_unlock_4,
.armes_cadenas_lock_1,
.armes_cadenas_lock_2,
.armes_cadenas_lock_3,
.armes_cadenas_lock_4 {
  display: none;
}

.charsheet .arme1_etat[value="0"] ~ div.armes_type_unlock_1,
.charsheet .arme1_etat[value="0"] ~ div.armes_cadenas_unlock_1,
.charsheet .arme1_etat[value="1"] ~ div.armes_type_lock_1,
.charsheet .arme1_etat[value="1"] ~ div.armes_cadenas_lock_1,
.charsheet .arme2_etat[value="0"] ~ div.armes_type_unlock_2,
.charsheet .arme2_etat[value="0"] ~ div.armes_cadenas_unlock_2,
.charsheet .arme2_etat[value="1"] ~ div.armes_type_lock_2,
.charsheet .arme2_etat[value="1"] ~ div.armes_cadenas_lock_2,
.charsheet .arme3_etat[value="0"] ~ div.armes_type_unlock_3,
.charsheet .arme3_etat[value="0"] ~ div.armes_cadenas_unlock_3,
.charsheet .arme3_etat[value="1"] ~ div.armes_type_lock_3,
.charsheet .arme3_etat[value="1"] ~ div.armes_cadenas_lock_3,
.charsheet .arme4_etat[value="0"] ~ div.armes_type_unlock_4,
.charsheet .arme4_etat[value="0"] ~ div.armes_cadenas_unlock_4,
.charsheet .arme4_etat[value="1"] ~ div.armes_type_lock_4,
.charsheet .arme4_etat[value="1"] ~ div.armes_cadenas_lock_4 {
  display: block;
}


.armes_type_unlock_1,
.armes_type_unlock_2,
.armes_type_unlock_3,
.armes_type_unlock_4,
.armes_type_lock_1,
.armes_type_lock_2,
.armes_type_lock_3,
.armes_type_lock_4 {
  grid-column: 1;
  grid-row: 1;
  letter-spacing: -0.4px;
  margin-left: 5px;
  padding-left: 5px;
  border-left: 1px solid var(--border_armes);
}

.armes_cadenas_unlock_1,
.armes_cadenas_unlock_2,
.armes_cadenas_unlock_3,
.armes_cadenas_unlock_4,
.armes_cadenas_lock_1,
.armes_cadenas_lock_2,
.armes_cadenas_lock_3,
.armes_cadenas_lock_4 {
  grid-column: 1;
  grid-row: 1;
  font-family: "Pictos";
  margin-left: 7px;
  margin-top: 7px;
  font-size: 12px;
  color: grey;
  width: 15px;
}

.armes_cadenas_unlock_1,
.armes_cadenas_unlock_2,
.armes_cadenas_unlock_3,
.armes_cadenas_unlock_4 {
  color: var(--black);
}

.armes_nom {
  grid-column: 3;
  grid-row: 1;
}

.armes_degats {
  grid-column: 5;
  grid-row: 1;
}

.armes_portee {
  grid-column: 7;
  grid-row: 1;
}

.armes_effet {
  grid-column: 9;
  grid-row: 1;
}

.armes_prenotes {
  grid-column: 1/3;
  grid-row: 2;
  margin-left: 5px;
  border-left: 1px solid  var(--border_armes);
}

.armes_notes {
  grid-column: 3/10;
  grid-row: 2;
}

.armes_roll {
  grid-column: 11;
  grid-row: 1/3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid  var(--border_armes);
}

.armes_type_titre {
  grid-column: 1;
  grid-row: 1;
  letter-spacing: -0.4px;
}

.armes_nom_titre {
  grid-column: 3;
  grid-row: 1;
  letter-spacing: -0.4px;
}

.armes_degats_titre {
  grid-column: 5;
  grid-row: 1;
}

.armes_portee_titre {
  grid-column: 7;
  grid-row: 1;
}

.armes_effet_titre {
  grid-column: 9;
  grid-row: 1;
}

.armes_notes_titre {
  grid-column: 3/10;
  grid-row: 2;
}

.armes_roll_titre {
  grid-column: 11;
  grid-row: 1;
  margin-left: -44px;
  font-size: 10px;
  letter-spacing: -0.7px;
}

.separateur_armes {
  grid-column: 1/12;
  grid-row: 1;
  margin-left: 5px;
  border-right: 1px solid  var(--border_armes);
  border-left: 1px solid  var(--border_armes);
}

.separateur_armes_border {
  grid-column: 1/12;
  grid-row: 1;
  margin-left: 5px;
  border-right: 1px solid  var(--border_armes);
  border-left: 1px solid  var(--border_armes);
  border-bottom: 1px solid  var(--border_armes);
}

.separateur_armes_border_end {
  grid-column: 1/12;
  grid-row: 1;
  margin-left: 5px;  
  border-right: 1px solid  var(--border_armes);
  border-left: 1px solid  var(--border_armes);
  border-bottom: 1px solid  var(--border_armes);
  border-radius: 0px 0px 5px 5px;
}

.wrapper_bloc_armures {
  display: grid;
  grid-template-columns: 0% 15% 3% 83% 3%;
  grid-auto-rows: 10px;
  margin-top: 17px;
  margin-left: -10px;
  margin-right: 10px;
}

/* Affichage des page dynamique */
div.illustration_armures_plaque,
div.illustration_armures_maille,
div.illustration_armures_cuir,
div.illustration_armures_vetement,
div.illustration_armures_aucune {
    display: none;
}

.charsheet .choix_armure[value="4"] ~ div.illustration_armures_plaque,
.charsheet .choix_armure[value="3"] ~ div.illustration_armures_maille,
.charsheet .choix_armure[value="2"] ~ div.illustration_armures_cuir,
.charsheet .choix_armure[value="1"] ~ div.illustration_armures_vetement,
.charsheet .choix_armure[value="0"] ~ div.illustration_armures_aucune {
    display: block;
}

.illustration_armures_plaque {
  grid-column: 2;
  grid-row: 2 / 26;
  background-image: var(--armure_dessin_plaque);
  background-size: 99px 230px;
  margin-left: 7px;
  margin-top: 5px;
  background-repeat: no-repeat;
}

.illustration_armures_maille {
  grid-column: 2;
  grid-row: 1 / 26;
  background-image: var(--armure_dessin_maille);
  background-size: 124px 320px;
  margin-left: -10px;
  margin-top: -14px;
}


.illustration_armures_cuir {
  grid-column: 2;
  grid-row: 1 / 26;
  background-image: var(--armure_dessin_cuir);
  background-size: 115px 191px;
  margin-top: 36px;
  margin-left: -3px;
  background-repeat: no-repeat;
}


.illustration_armures_vetement {
  grid-column: 2;
  grid-row: 1 / 26;
  background-image: var(--armure_dessin_tissu);
  background-size: 120px 328px;
  margin-top: -30px;
  margin-left: -5px;
}

.illustration_armures_aucune {
  grid-column: 2;
  grid-row: 2/26;
  background-image: var(--armure_dessin_aucune);
  background-size: contain;
}

.tableau_armures {
  grid-column: 4;
  grid-row: 1;
}

.wrapper_zone_armures,
.wrapper_zone_armures_titre {
  display: grid;
  grid-template-columns: 3% 1% 17% 3% 0% 0% 7% 2% 5% 2% 6% 2% 5% 2% 8% 2% 9% 2% 11% 2% 9%;
  grid-auto-rows: 25px;
  font-size: 12px;
}

.wrapper_zone_armures_titre {
  /* grid-template-columns: 3% 1% 20% 1% 0% 0% 9% 2% 5% 2% 5% 2% 5% 2% 5% 2% 5% 2% 5% 2% 5% 2% 14%; */
  grid-auto-rows: 30px;
  line-height: 30px;
  border: none;
  background-image: var(--armes_barre_titre);
  color: var(--white);
  font-weight: bold;
  font-size: 10px;
  background-size: cover;
}

.wrapper_zone_armures_separateur {
  display: grid;
  grid-template-columns: 3% 1% 17% 3% 0% 0% 7% 2% 5% 2% 6% 2% 5% 2% 8% 2% 9% 2% 11% 2% 9%;
  grid-auto-rows: 10px;
}

.armures_equipee_titre {
  grid-column: 1;
  grid-row: 1;
  letter-spacing: -0.4px;
}

.armures_malus_titre {  
  grid-column: 9/22;
  grid-row: 1;
  letter-spacing: -0.4px;
  background-image: var(--armes_barre_titre);
  color: var(--white);
  font-weight: bold;
  font-size: 10px;
  background-size: 416px 30px;
  text-align: center;
}

.armures_type_titre {
  grid-column: 3;
  grid-row: 1;
}

.armures_nom_titre {
  grid-column: 5;
  grid-row: 1;
}

.armures_encaissement_titre {
  grid-column: 7;
  grid-row: 1;
}

.armures_dexterite_titre {
  grid-column: 9;
  grid-row: 1;
}

.armures_athletisme_titre {
  grid-column: 11;
  grid-row: 1;
}

.armures_cac_titre {
  grid-column: 13;
  grid-row: 1;
}

.armures_pugilat_titre {
  grid-column: 15;
  grid-row: 1;
}

.armures_distance_titre {
  grid-column: 17;
  grid-row: 1;
}

.armures_discretion_titre {
  grid-column: 19;
  grid-row: 1;
}

.armures_esquive_titre {
  grid-column: 21;
  grid-row: 1;
}

.armures_equipee {
  grid-column: 1;
  grid-row: 1;
  padding-top: 6px;
  padding-left: 4px;
  border-left: 1px solid  var(--border_armes);
}

.armures_type {
  grid-column: 3;
  grid-row: 1;
}

.armures_nom {
  grid-column: 5;
  grid-row: 1;
}

.armures_encaissement {
  grid-column: 7;
  grid-row: 1;
}

.armures_dexterite {
  grid-column: 9;
  grid-row: 1;
}

.armures_athletisme {
  grid-column: 11;
  grid-row: 1;
}

.armures_cac {
  grid-column: 13;
  grid-row: 1;
}

.armures_pugilat {
  grid-column: 15;
  grid-row: 1;
}

.armures_distance {
  grid-column: 17;
  grid-row: 1;
}

.armures_discretion {
  grid-column: 19;
  grid-row: 1;
}

.armures_esquive {
  grid-column: 21;
  grid-row: 1;
  border-right: 1px solid  var(--border_armes);
  margin-right: -8px;
  padding-right: 10px;
}

.armures_prenotes {
  grid-column: 1/7;
  grid-row: 2;
  border-left: 1px solid  var(--border_armes);
}

.armures_notes {
  grid-column: 7/22;
  grid-row: 2;
  border-right: 1px solid  var(--border_armes);
  margin-right: -8px;
  padding-right: 10px;
}

.separateur_armures {
  grid-column: 1/22;
  grid-row: 1;
  margin-left: 5px;
  border-right: 1px solid  var(--border_armes);
  border-left: 1px solid  var(--border_armes);
}

.separateur_armures_border {
  grid-column: 1/22;
  grid-row: 1;
  border-right: 1px solid  var(--border_armes);
  border-left: 1px solid  var(--border_armes);
  border-bottom: 1px solid  var(--border_armes);
  margin-right: -8px;
  margin-top: -1px;
}

.separateur_armures_border_end {
  grid-column: 1/22;
  grid-row: 3;
  border-right: 1px solid var(--border_armes);
  border-left: 1px solid var(--border_armes);
  border-bottom: 1px solid var(--border_armes);
  border-radius: 0px 0px 5px 5px;
  margin-right: -8px;
}


.wrapper_bloc_boucliers {
  display: grid;
  grid-template-columns: 0% 70% 3% 25% 2%;
  grid-auto-rows: 10px;
  margin-top: 17px;
  margin-left: -10px;
  margin-right: 10px;
  transform: rotate(0.2deg);
}

/* Affichage des page dynamique */
div.illustration_pavois,
div.illustration_bouclier_rond,
div.illustration_bouclier_aucun {
    display: none;
}

.charsheet .choix_bouclier[value="2"] ~ div.illustration_pavois,
.charsheet .choix_bouclier[value="1"] ~ div.illustration_bouclier_rond,
.charsheet .choix_bouclier[value="0"] ~ div.illustration_bouclier_aucun {
    display: block;
}

.illustration_bouclier_aucun {
  grid-column: 4/6;
  grid-row: 1 / 14;
  background-image: var(--bouclier_dessin_rond);
  background-size: 159px 150px;
  margin-top: -25px;
  margin-left: 17px;
  background-repeat: no-repeat;  
  opacity: 0.5;
}

.illustration_bouclier_rond {
  grid-column: 4/6;
  grid-row: 1 / 14;
  background-image: var(--bouclier_dessin_rond);
  background-size: 159px 150px;
  margin-top: -25px;
  margin-left: 17px;
  background-repeat: no-repeat;
}

.illustration_pavois {
  grid-column: 4;
  grid-row: 1 / 29;
  background-image: var(--bouclier_dessin_pavois);
  background-size: 131px 150px;
  margin-top: -20px;
  margin-left: 30px;
  background-repeat: no-repeat;
}

/* .illustration_bouclier_aucun {
  grid-column: 4;
  grid-row: 1/15;
  background-image: var(--bouclier_dessin_aucun);
  background-size: 182px 133px;
  margin-top: -8px;
  margin-left: 0px;
  background-repeat: no-repeat;
  border-radius: 70px;
  margin-bottom: 14px;
  transform: rotate(3.7deg);
  opacity: 0.9;
} */

.tableau_boucliers {
  grid-column: 2;
  grid-row: 1;
}

.wrapper_zone_boucliers,
.wrapper_zone_boucliers_titre {
  display: grid;
  grid-template-columns: 2% 4% 19% 2% 0% 0% 11% 1% 12% 1% 48% 1%;
  grid-auto-rows: 25px;
  font-size: 12px;
  line-height: 33px;
}

.wrapper_zone_boucliers_titre {  
  grid-template-columns: 2% 9% 15% 2% 0% 0% 11% 1% 13% 14% 48% 1%;
  grid-auto-rows: 30px;
  line-height: 30px;
  border: none;
  background-image: var(--armes_barre_titre);
  color: var(--white);
  font-weight: bold;
  font-size: 10px;
  background-size: cover;
}

.boucliers_equipee_titre {
  grid-column: 1;
  grid-row: 1;
  letter-spacing: -0.4px;
}

.boucliers_type_titre {
  grid-column: 3;
  grid-row: 1;  
  display: flex;
  align-items: center;
}

.boucliers_nom_titre {
  grid-column: 5;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.boucliers_parade_titre {
  grid-column: 7;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.boucliers_esquive_titre {
  grid-column: 9;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.boucliers_notes_titre {
  grid-column: 11;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.boucliers_equipee {
  grid-column: 1;
  grid-row: 1;
  letter-spacing: -0.4px;
  padding-top: 2px;
  padding-left: 4px;
  border-left: 1px solid var(--border_armes);
}

.boucliers_type {
  grid-column: 3;
  grid-row: 1;
}

.boucliers_nom {
  grid-column: 5;
  grid-row: 1;
}

.boucliers_parade {
  grid-column: 7;
  grid-row: 1;
}

.boucliers_esquive {
  grid-column: 9;
  grid-row: 1;
}

.boucliers_notes {
  grid-column: 11;
  grid-row: 1;
  border-right: 1px solid  var(--border_armes);
  padding-right: 7px;
}

.wrapper_zone_boucliers_separateur {
  display: grid;
  grid-template-columns: 1% 9% 15% 2% 0% 0% 11% 1% 13% 14% 32% 1%;
  grid-auto-rows: 10px;
}

.separateur_boucliers {
  grid-column: 1/12;
  grid-row: 1;
  margin-left: 5px;
  border-right: 1px solid  var(--border_armes);
  border-left: 1px solid  var(--border_armes);
}

.separateur_boucliers_border {
  grid-column: 1/12;
  grid-row: 1;
  border-right: 1px solid  var(--border_armes);
  border-left: 1px solid  var(--border_armes);
  border-bottom: 1px solid  var(--border_armes);
  margin-right: -10px;
  margin-top: -1px;
}

.separateur_boucliers_border_end {
  grid-column: 1/12;
  grid-row: 2;
  border-right: 1px solid var(--border_armes);
  border-left: 1px solid var(--border_armes);
  border-bottom: 1px solid var(--border_armes);
  border-radius: 0px 0px 5px 5px;
}

/* INVENTAIRE */

.wrapper_bloc_inventaire {
  display: grid;
  grid-template-columns: 17% 0% 73% 6% 9%;
  grid-auto-rows: 10px;
  margin-top: 17px;
  margin-bottom: 20px;
}

.illustration_sac {
  grid-column: 1;
  grid-row: 1 / 13;
  background-image: var(--dessin_sac);
  background-size: 132px 207px;
  margin-top: -72px;
  background-repeat: no-repeat;
}

.texte_sac {
  grid-column: 3 / 5;
  grid-row: 1 / 22;
  border-radius: 10px;
  background-image: var(--background_page);
  background-size: cover;
  box-shadow: 4px 3px 6px 4px #000000c4;
  margin-right: 37px;
  margin-left: -50px;
}

.illustration_bourse {
  grid-column: 4/6;
  grid-row: 12 / 26;
  background-image: var(--dessin_bourse);
  background-size: 122px 119px;
  background-repeat: no-repeat;
  margin-left: -59px;
  transform: rotate(-1.5deg);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-left: 10px;
}

.inventaire_bloc_argent {
  grid-column: 4/6;
  grid-row: 19;
  margin-left: -119px;
  transform: rotate(-1.5deg);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  padding-left: 10px;
}

.inventaire_bloc_argent_titre {
  grid-column: 4/6;
  grid-row: 23;
  margin-left: -79px;
  transform: rotate(-1.5deg);
  overflow: visible;
  padding-top: 40px;
  padding-left: 10px;
  margin-right: 38px;  
  text-align: center;
} 

.wrapper_bloc_argent {
  display: grid;
  grid-template-columns: 0% 33% 1% 33% 1% 33% 0%;
  grid-auto-rows: 50px;
  font-size: 12px;
  font-weight: bold;
}

.wrapper_bloc_argent_titre {
  display: grid;
  grid-template-columns: 0% 33% 1% 33% 1% 33% 0%;
  grid-auto-rows: 20px;  
  font-size: 11px;
  font-weight: bold;
  margin-top: -13px;
}

.inventaire_livre_data {
  grid-column: 2;
  grid-row: 1;
}

.inventaire_sous_data {
  grid-column: 4;
  grid-row: 1;
}

.inventaire_denier_data {
  grid-column: 6;
  grid-row: 1;
}

.inventaire_livre_titre {
  grid-column: 2;
  grid-row: 1;
}

.inventaire_sous_titre {
  grid-column: 4;
  grid-row: 1;
}

.inventaire_denier_titre {
  grid-column: 6;
  grid-row: 1;
}

.inventaire_livre_couleur {
  grid-column: 2;
  grid-row: 1;
  background: gold;
  border-radius: 30px;
}

.inventaire_sous_couleur {
  grid-column: 4;
  grid-row: 1;
  background: #C0C0C0;
  border-radius: 30px;
}

.inventaire_denier_couleur {
  grid-column: 6;
  grid-row: 1;
  background: #614e1a;
  border-radius: 30px;
}



/* NOTES */

.wrapper_bloc_note {
  display: grid;
  grid-template-columns: 5% 42% 42% 10% 0%;
  grid-auto-rows: 10px;
  margin-top: 17px;
  margin-bottom: 20px;
  transform: rotate(-0.8deg);
}

.illustration_carnet {
  grid-column: 4;
  grid-row: 1 / 13;
  background-image: var(--dessin_carnet);
  background-size: 152px 140px;
  background-repeat: no-repeat;
  margin-top: -40px;
  margin-left: -72px;
}

.texte_note_gauche {
  grid-column: 2;
  grid-row: 1 / 90;
  border-radius: 10px;
  background-image: var(--background_page);
  background-size: cover;
  box-shadow: 4px 3px 6px 4px #000000c4;
}

.texte_note_droite {
  grid-column: 3;
  grid-row: 1 / 90;
  border-radius: 10px;
  background-image: var(--background_page);
  background-size: cover;
  box-shadow: 4px 3px 6px 4px #000000c4;
}

/* CONFIG */

.wrapper_config {
  display: grid;
  grid-template-columns: 1% 30% 0% 18% 2% 30% 0% 18% 0%;
  grid-auto-rows: 10px;
  margin-top: -1px;
}

.wrapper_config_1 {
  display: grid;
  grid-template-columns: 1% 30% 0% 18% 0% 30% 0% 18% 0%;
  grid-auto-rows: 10px;
  margin-top: -1px;
}

.config_titre_tableau {
  grid-column: 2 / 10;
  grid-row: 1 / 5;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  color: var(--white);
}

.config_titre1 {
  grid-column: 2;
  grid-row: 1 / 6;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.config_data1 {
  grid-column: 4;
  grid-row: 1 / 6;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: none;
}

.config_titre2 {
  grid-column: 6;
  grid-row: 1 / 6;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.config_data2 {
  grid-column: 8;
  grid-row: 1 / 6;
  padding: 5px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: none;
}

/* jet de dés physique ou roll20 */
div.hero_titre_aura,
div.hero_titre_aura_physique,
div.caracteristiques_force_titre,
div.caracteristiques_force_titre_physique,
div.caracteristiques_dexterite_titre,
div.caracteristiques_dexterite_titre_physique,
div.caracteristiques_constitution_titre,
div.caracteristiques_constitution_titre_physique,
div.caracteristiques_intelligence_titre,
div.caracteristiques_intelligence_titre_physique,
div.caracteristiques_charisme_titre,
div.caracteristiques_charisme_titre_physique,
div.caracteristiques_volonte_titre,
div.caracteristiques_volonte_titre_physique,
div.derivees_titre_roll,
div.derivees_titre_roll_physique,
div.competence_nom_double,
div.competence_nom_double_physique,
div.competence_valeur_simple_custom,
div.competence_valeur_simple_custom_physique,
div.boutton_aura,
div.boutton_aura_physique

 {
    display: none;
}

.charsheet .choix_jet[value="1"] ~ div.hero_titre_aura,
.charsheet .choix_jet[value="1"] ~ div.boutton_aura,
.charsheet .choix_jet[value="1"] ~ div.competence_nom_double,
.charsheet .choix_jet[value="1"] ~ div.competence_valeur_simple_custom
 {
    display: flex;
}

.charsheet .choix_jet[value="1"] ~ div.caracteristiques_force_titre,
.charsheet .choix_jet[value="1"] ~ div.caracteristiques_dexterite_titre,
.charsheet .choix_jet[value="1"] ~ div.caracteristiques_constitution_titre,
.charsheet .choix_jet[value="1"] ~ div.caracteristiques_intelligence_titre,
.charsheet .choix_jet[value="1"] ~ div.caracteristiques_charisme_titre,
.charsheet .choix_jet[value="1"] ~ div.caracteristiques_volonte_titre,
.charsheet .choix_jet[value="1"] ~ div.derivees_titre_roll
 {
    display: block;
}

.charsheet .choix_jet[value="2"] ~ div.hero_titre_aura_physique,
.charsheet .choix_jet[value="2"] ~ div.boutton_aura_physique,
.charsheet .choix_jet[value="2"] ~ div.competence_nom_double_physique,
.charsheet .choix_jet[value="2"] ~ div.competence_valeur_simple_custom_physique
 {
    display: flex;
}


.charsheet .choix_jet[value="2"] ~ div.caracteristiques_force_titre_physique,
.charsheet .choix_jet[value="2"] ~ div.caracteristiques_dexterite_titre_physique,
.charsheet .choix_jet[value="2"] ~ div.caracteristiques_constitution_titre_physique,
.charsheet .choix_jet[value="2"] ~ div.caracteristiques_intelligence_titre_physique,
.charsheet .choix_jet[value="2"] ~ div.caracteristiques_charisme_titre_physique,
.charsheet .choix_jet[value="2"] ~ div.caracteristiques_volonte_titre_physique,
.charsheet .choix_jet[value="2"] ~ div.derivees_titre_roll_physique
 {
    display: block;
}



/* COMPENDIUM */
/* Affichage des page dynamique */
div.compendium_sm,
div.compendium_hero,
div.compendium_combat,
div.compendium_combat_tableaux,
div.compendium_aura_priere,
div.compendium_aura,
div.compendium_possession,
div.compendium_equipement,
div.compendium_armes {
    display: none;
}

.charsheet .choix_compendium[value="1"] ~ div.compendium_sm,
.charsheet .choix_compendium[value="2"] ~ div.compendium_hero,
.charsheet .choix_compendium[value="3"] ~ div.compendium_combat,
.charsheet .choix_compendium[value="4"] ~ div.compendium_combat_tableaux,
.charsheet .choix_compendium[value="5"] ~ div.compendium_aura_priere,
.charsheet .choix_compendium[value="6"] ~ div.compendium_aura,
.charsheet .choix_compendium[value="7"] ~ div.compendium_possession,
.charsheet .choix_compendium[value="8"] ~ div.compendium_equipement,
.charsheet .choix_compendium[value="9"] ~ div.compendium_armes
 {
    display: block;
}

.compendium_titre {
  background: red;
}

.wrapper_compendium_1col {
  display: grid
;
  grid-template-columns: 0% 62% 0%;
  grid-auto-rows: auto;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Playfair';
  line-height: 20px;
  font-size: 14px;
  text-align: justify;
}

.compendium_1col_titre {
  grid-column: 2;
  font-size: 22px;
  font-weight: bold;
  margin-top: 30px;
}

.compendium_1col_texte {
  grid-column: 2;
  padding-left: 20px;
}

.compendium_1col_separateur {
  grid-column: 2;
  border-bottom: 2px solid black;
}

.wrapper_compendium_2col {
  display: grid;
  grid-template-columns: 0% 48% 4% 48% 0%;
  grid-auto-rows: auto; /* Lignes ajustées au contenu */
  gap: 10px; /* Espacement entre les colonnes et les lignes */
  width: 100%; /* Adapte la largeur totale à celle du conteneur parent */
  box-sizing: border-box; /* Inclut le padding/border dans la largeur */
  font-family: 'Playfair';
  line-height: 20px;
  font-size: 14px;
}

.compendium_2col_titre {
  grid-column: 2/5;
  font-size: 22px;
  font-weight: bold;
  margin-top: 30px;
}

.compendium_2col_texte_gauche {
  grid-column: 2;
  padding-left: 20px;
}

.compendium_2col_texte_droite {
  grid-column: 4;
  padding-left: 20px;
}

.compendium_2col_separateur {
  grid-column: 3;
}

.wrapper_compendium_3col {
  display: grid;
  grid-template-columns: 33% 25% 6% 33%;
  grid-auto-rows: auto;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Playfair';
  line-height: 20px;
  font-size: 14px;
  text-align: justify;
}

.compendium_3col_titre {
  grid-column: 1/3;
  font-size: 22px;
  font-weight: bold;
  margin-top: 30px;
}

.compendium_3col_texte {
  grid-column: 1/3;
  padding-left: 20px;
}

.compendium_3col_illustration_effet {
  grid-column: 4;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_heroique_effet.webp);
  background-size: 268px 312px;
  width: 263px;
  height: 308px;
  margin-top: -66px;
  overflow: visible;
}

.compendium_3col_illustration_restriction {
  grid-column: 4;
  background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Obscuritas/images/dessin_heroique_restriction.webp);
  background-size: 262px 334px;
  width: 263px;
  height: 308px;
  margin-top: -168px;
  overflow: visible;
}

.wrapper_compendium_tableau_3col {
  display: grid;
  grid-template-columns: 2% 30% 30% 30%;
  grid-auto-rows: auto;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Playfair';
  line-height: 17px;
  font-size: 13px;
  text-align: center;
}

.wrapper_compendium_tableau_3col_equipement {
  display: grid;
  grid-template-columns: 2% 30% 20% 40%;
  grid-auto-rows: auto;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Playfair';
  line-height: 13px;
  font-size: 13px;
  text-align: center;
}

.wrapper_compendium_tableau_4col_equipement {
  display: grid;
  grid-template-columns: 2% 0% 21% 50% 16%;
  grid-auto-rows: auto;
  width: 100%;
  box-sizing: border-box;
  font-family: 'Playfair';
  line-height: 13px;
  font-size: 13px;
  text-align: center;
}

.compendium_tableau_type {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-top: none;
  background: #ffffff45;
}

.compendium_tableau_action {
  grid-column: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-top: none;
  border-left: none;
  padding: 10px;
  background: #ffffff45;
}

.compendium_tableau_effet {
  grid-column: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-top: none;
  border-left: none;
  padding: 10px;
  background: #ffffff45;
}

.compendium_tableau_categorie {
  grid-column: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-top: none;
  background: #ffffff45;
}

.compendium_tableau_nom {
  grid-column: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-top: none;
  padding: 10px;
  background: #ffffff45;
}

.compendium_tableau_description {
  grid-column: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-top: none;
  border-left: none;
  padding: 10px;
  background: #ffffff45;
}

.compendium_tableau_prix {
  grid-column: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  border-top: none;
  border-left: none;
  padding: 10px;
  background: #ffffff45;
}






/* ROLL TEMPLATE */
.sheet-rolltemplate-thanatos {
  text-align: center;
  --echec_2: #bc0000e0;
  --echec_3: #bc0000e0;
  --echec_1: #b016a0;
  --reussite_3: #036c03;
  --reussite_2: #035bae;
  --reussite_1: #9e9c02d9;
  --blanc_roll: #fcfcfdf0;
  --blanc_roll_dark: #fcfcfdf0;
  --noir_roll: #000004;
  --box_shadow: 2px 2px 10px 1px #000000f2;	
  --box_shadow_dark: 0px 1px 4px 3px #ffffff69;
  --background_color: #fcfcfdf0;
  --background_color_dark: #fcfcfdf0;
  --roll_middle: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_middle.png);
  --roll_background: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_background.png);
  --roll_top: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_top.png);
  --roll_bottom: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_bottom.png);
  --roll_separation:url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Obscuritas/images/rolltemplate_separation.png);
  width: 260px;
  height: auto;
}
 
.sheet-rolltemplate-thanatos .sheet-rolltemplate-darkmode {
  --echec_2: #a80303e0;
  --echec_3: #a80303e0;
  --echec_1: #9303bb;
  --reussite_3: #036c03;
  --reussite_2: #004280;
  --reussite_1: #8a8809;
  --blanc_roll: #fcfcfde5;
  --noir_roll: #000004;	
--box_shadow: 0px 1px 4px 3px #ffffff69;
--background_color: #fcfcfde5;
}

.sheet-rolltemplate-thanatos .sheet-toper {
  background: var(--roll_top);
  background-size: cover;
  background-repeat: no-repeat;
  height: 4px;
  width: 263px;
  margin-left: -4px;
}

.sheet-rolltemplate-thanatos .sheet-bottom {
  background-image: var(--roll_bottom);
  background-size: cover;
  background-repeat: no-repeat;
  height: 4px;
  width: 265px;
  margin-left: -2px;
}

.sheet-rolltemplate-thanatos .sheet-separateur {
  background-image: var(--roll_separation);
  background-size: 260px;
  background-repeat: no-repeat;
  height: 10px;
  width: 255px;
  margin-left: 3px;
}


.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-center {
  text-align: center;
  width: auto;
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-color {
  background-image: var(--roll_middle);
  background-size: 260px 500px;
  box-shadow: var(--box_shadow);
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-background {
  background: var(--background_color);
  background-size: 260px 500px;
  background-size: cover;
  background-image: var(--roll_background)
}

.sheet-rolltemplate-thanatos .sheet-titre {
  display: grid;
  grid-template-columns: 32% 68%;
  background: var(--noir_roll);
  height: 75px;
}


.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-titre-roll,
.sheet-rolltemplate-thanatos .sheet-portrait_roll,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-header {
  word-wrap: break-word;
  letter-spacing: -0.7px;
  padding-top: 17px;
  padding-bottom: 12px;
  font-weight: bold;
  width: auto;
  margin-left: 0px;
  background: var(--noir_roll);
  margin-top: -1px;
  margin-bottom: -5px;
  color: var(--blanc_roll);
  font-size: 26px;
  /* font-family: "EB Garamond", serif; */
  font-family: "Jim Nightshade";
  line-height: 23px;
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec-tragique,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec-critique,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite-exceptionnelle,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite-critique,
.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite {
  background-color: transparent;
  color: #000000b3;
  font-size: 60px;
  letter-spacing: 0px;
  padding: 15px;
  margin-top: 15px;
  font-family: "EB Garamond", serif;
  /* font-family: "Jim Nightshade"; */
  width: auto;
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec-tragique {
  color: var(--echec_1);
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec-critique{
  color: var(--echec_1);
  font-family: "Shadows into light";
  font-weight: bold;
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-echec{
  color: var(--echec_3);
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite-exceptionnelle {
  color: var(--reussite_1);
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite-critique {
  color: var(--reussite_2);
  font-family: "Kaushan script";
}

.sheet-rolltemplate-thanatos .sheet-rolltemplate-thanatos-subheader-reussite {
  color: var(--reussite_3);
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-result {
  font-size: 36px;
  font-family: "Playfair", serif;
  padding: 15px;
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec-tragique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite-exceptionnelle,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite {
  font-size: 20px;
  line-height: 20px;
  font-family: "Playfair", serif;
  /* font-family: "EB Garamond", serif; */
  padding: 5px;
  padding-top: 15px;
  letter-spacing: -0.7px;
  margin-bottom: 10px;
  width: auto;
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec-tragique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite-exceptionnelle,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite { 
  padding: 5px;
  padding-bottom: 6px;
  letter-spacing: -0.2px;
  color: var(--blanc_roll);
  width: auto;
  margin-left: 0px;
  background: var(--noir_roll);
  margin-top: -5px;
  font-family: "Jim Nightshade";
  /* font-family: "EB Garamond", serif; */
  font-size: 18px;
  line-height: 10px;
  padding-top: 10px;
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec-tragique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec-tragique {
  color: var(--echec_1);
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec-critique,   
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec-critique{
  color: var(--echec_1);
  font-family: "Shadows into light";
  font-weight: bold;
  font-size: 25px;
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-echec,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-echec {
  color: var(--echec_3);
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite-exceptionnelle,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite-exceptionnelle {
  color: var(--reussite_1);
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite-critique,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite-critique {
  color: var(--reussite_2);
  font-family: "Kaushan script";
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-texte-reussite,
.sheet-rolltemplate-thanatos .sheet-template-thanatos-rappel-reussite {
  color: var(--reussite_3);
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-succeeds {
  color: #148c00;
}

.sheet-rolltemplate-thanatos .sheet-template-thanatos-misses {
  color: #a90000;
}

.sheet-rolltemplate-thanatos .inlinerollresult {
  background-color: transparent !important;
  border: none !important;
  color: unset !important;
}

.sheet-rolltemplate-thanatos-header .inlinerollresult {
  background-color: transparent !important;
  border: none !important;
  color: unset !important;
}
 
.sheet-rolltemplate-thanatos .inlinerollresult.fullcrit {
  background-color: transparent !important;
  border: none !important;
  color: unset !important;
}
 
.sheet-rolltemplate-thanatos .inlinerollresult.fullfail {
  background-color: transparent !important;
  border: none !important;
  color: unset !important;
}
 
.sheet-rolltemplate-thanatos .inlinerollresult.importantroll {
  background-color: transparent !important;
  border: none !important;
  color: unset !important;
}

.sheet-rolltemplate-thanatos .sheet-content {  
display: grid;
grid-template-columns: 50% 50%;
line-height: 13px;
  color: #000000b3;
  margin-left: 2px;
}

.sheet-rolltemplate-thanatos .sheet-content > div{
  padding: 5px;
}

/* Left column */
.sheet-rolltemplate-thanatos .sheet-content .sheet-key {  
font-weight: bold;
padding-right: 2px;
text-align: right;
font-size: 13px;
}

/* Right column */
.sheet-rolltemplate-thanatos .sheet-content .sheet-value {
padding-right: 5px;
text-align: left;
font-size: 13px;
}

/* Make even-numbered rows grey */
.sheet-rolltemplate-thanatos .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-thanatos .sheet-content :nth-child(4n) {
background: #51515136;
color: unset !important;
}

/* Boutons liens */
/* Roll Buttons */
.sheet-rolltemplate-thanatos a[href^='!'],
.sheet-rolltemplate-thanatos a[href^='~'],
.sheet-rolltemplate-thanatos a[href^='`']{
  color: #000000e8;
  border: none;
  background: none;
  font-size: 14px;
  line-height: 6px;
  text-align: left;
}
.sheet-rolltemplate-thanatos a[href^='!']:hover,
.sheet-rolltemplate-thanatos a[href^='~']:hover,
.sheet-rolltemplate-thanatos a[href^='`']:hover{
  top: -1px;
  color: #ff0000cb;
}
/* hyperlinks */
.sheet-rolltemplate-thanatos a:not([href^='~']):not([href^='!']):not([href^='`']){
    font-weight: bold;
    color:#3f8aa6;
}
.sheet-rolltemplate-thanatos a:not([href^='~']):not([href^='!']):not([href^='`']):hover {
  font-weight: bold;
  color:#70c0dd;
}
.sheet-rolltemplate-thanatos a:not([href^='~']):not([href^='!']):not([href^='`']):visited{
  color:purple;
}
.sheet-rolltemplate-thanatos a:not([href^='~']):not([href^='!']):not([href^='`']):visited:hover{
  color:rgb(187, 45, 187);
}