/* Import de font */
@import url('https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Radio+Canada+Big:ital,wght@1,700&family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap');

/*font-family: "Radio Canada", sans-serif;
font-family: "Radio Canada Big", sans-serif; 
font-family: "Faculty Glyphic", sans-serif;*/

/* Apparence générale de la page */
.charsheet {
    --black: #474a38;
    --white: #fcfcfd;
	--font_playfair: "Playfair", serif;
    --borderdev: 1px solid red;
    --couleur_dotted: #00000078;
    --text_input: #000000bd;
    --text_hover: #a23e33;
    --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: #b9ad9a;    
    --color_text_button: #000002c4;
    --color_text_button_selected: #000002c4;
    --color_button_hover: #d7d2d2;
    --color_text_hover: #000000;
    --color_ombre_button: #575757a8;
    font-family: "Radio Canada", sans-serif;
    letter-spacing: -0.8px;
    color: var(--black);
    font-size: 19px;
    line-height: 25px;
    margin: 0px;
}

.sheet-darkmode .charsheet {
    --black_text: #000002;
    --white_text: #fcfcfd;
}

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

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

::placeholder {
  color: rgb(43, 43, 43);
  font-size: 13px;
  margin-top: 0px;
}

/* Mise en page */
span.apparence {  
	margin-left: 5px;
	margin-right: 5px;
	font-size: 14px;
}

span.picto {  
	font-family: "pictos";
	font-size: 16px;
}

/* Les input */
.charsheet input {  
    border: none;
    outline: none;
    resize: none;
    padding: 0px;
    cursor: pointer;
    overflow: hidden;
    color: var(--black);
    font-size: 18px;
    line-height: 25px;
    background: transparent;
}

/* Suppression des fleches pour input number */
.charsheet input[type=number]::-webkit-inner-spin-button,
.charsheet input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
      margin: 0; 
}

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

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

/* Checkbox custom */
input[type="checkbox"] {    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--white_text);
    margin: 0;
    font: inherit;
    color: var(--white);
    width: 13px;
    height: 13px !important;
    border: 2px solid #a13d32;
    border-radius: 15px;
}

input[type="checkbox"]:checked {
    background-color: #a13d32;
}

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: -19px;
  }

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

/* CUSTOM CHECKBOX */
.charsheet .blessure_box {
    display: none;
}
.charsheet .itd-checkbox-container {
    display: inline;
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 15px;
}

.charsheet .itd-checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
  
  .charsheet .itd-checkbox-checkmark {
    position: absolute;
    top: -2px;
    left: 0;
    height: 8px;
    width: 8px;
    background-color: transparent;
    border-radius: 0px;
    transform: rotate(45deg);
    border: 1px solid #2b2b2b;
}
  
  .charsheet .itd-checkbox-container:hover input~.itd-checkbox-checkmark {
    background-color: #cccccc75;
}
  
  .charsheet .itd-checkbox-container input:checked~.itd-checkbox-checkmark {
    background-color: #2b2b2b;
}
  
  .charsheet .itd-checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
  
  /* Show the checkmark when checked */
  .charsheet .itd-checkbox-container input:checked~.itd-checkbox-checkmark:after {
    display: block;
}
  
  /* Custom checkmark */
  .charsheet .itd-checkbox-container .itd-checkbox-checkmark:after {
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: none;
}

  .charsheet .itd-checkbox-checkmark:checked + label::before {
    content: "";
    display: flex;
    justify-content: center;
    color: var(--black);
    font-size: 17px;
    font-weight: bold;
    margin-top: -19px;
}

.charsheet input[type="number"] {
    appearance: unset !important;
    -moz-appearance: textfield !important; 
}

.charsheet button[type=action].button_creation_suivant

.charsheet button[type=action].button_texte::before,
.charsheet button[type=roll].button_texte::before,
.charsheet button[type=action].button_picto::before,
.charsheet button[type=roll].button_picto::before,
.charsheet button[type=action].button_reset_ark::before,
.charsheet button[type=roll].button_reset_ark::before,
.charsheet button[type=action].button_annonce::before,
.charsheet button[type=roll].button_annonce::before,
.charsheet button[type=action].button_creation::before,
.charsheet button[type=action].button_creation1::before,
.charsheet button[type=action].button_creation2::before {
	content: '';
}

.charsheet button[type=action].button_texte,
.charsheet button[type=roll].button_texte,
.charsheet button[type=action].button_picto,
.charsheet button[type=roll].button_picto,
.charsheet button[type=action].button_reset_ark,
.charsheet button[type=roll].button_reset_ark,
.charsheet button[type=action].button_annonce,
.charsheet button[type=roll].button_annonce {
    padding: 0;
    margin: 0;
    box-shadow: none;
    text-shadow: none;
    background: none;
    text-align: right;
    height: 20px;
    border: none;
    border-radius: 1px;
    color: var(--black);
    font-size: 11px;
    line-height: 25px;
    text-transform: uppercase;
    letter-spacing: -0.8px;  
    margin-top: 3px;
}

.charsheet button[type=action].button_picto,
.charsheet button[type=roll].button_picto {
    font-family: dicefontd20;
    font-size: 20px;
    margin-top: 0px;
}

.charsheet button[type=action].button_annonce,
.charsheet button[type=roll].button_annonce {
    font-family: pictos;
    font-size: 20px;
    margin-top: 0px;
    color: #555555b2;
}

.charsheet button[type=action].button_reset_ark,
.charsheet button[type=roll].button_reset_ark {
    height: 53px;
    width: 53px;
    border-radius: 35px;
    color: transparent;  
    text-align: center;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 2s;
    transition-delay: 0s;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
    background-size: cover;
    font-family: dicefontd8;
    font-size: 40px;

}

.charsheet button[type=action].button_blessure,
.charsheet button[type=roll].button_reset_blessure {
    height: 53px;
    width: 53px;
    border-radius: 35px;
    color: transparent;  
    text-align: center;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 2s;
    transition-delay: 0s;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
    background-size: cover;
}


.charsheet button[type=action].button_creation {
    border: none;
    background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/fond_titre_roll.png);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    height: 26px;
    width: 110px;
    text-align: center;
    box-shadow: 3px 3px 5px 1px black;
}


.charsheet button[type=action].button_creation1 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/button_feuille.png);
    background-size: 251px 242px;
    width: 240px;
    height: 240px;
    border: none;
    box-shadow: 3px 3px 5px 1px black;
}

.charsheet button[type=action].button_creation2 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/button_creer.png);
    background-size: 251px 242px;
    width: 240px;
    height: 240px;
    border: none;
    box-shadow: 3px 3px 5px 1px black;
}

.charsheet button[type=action].button_texte:hover,
.charsheet button[type=roll].button_texte:hover,
.charsheet button[type=action].button_picto:hover,
.charsheet button[type=roll].button_picto:hover,
.charsheet button[type=action].button_annonce:hover,
.charsheet button[type=roll].button_annonce:hover {
    color: var(--text_hover);
}

.charsheet button[type=action].button_reset_ark:hover,
.charsheet button[type=roll].button_reset_ark:hover {
    background-color: #a13d32;
    /* transition-delay:1s; */
    color: white;
    opacity:1;  
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
    background-size: cover;
}

.charsheet button[type=action].button_reset_blessure:hover,
.charsheet button[type=roll].button_reset_blessure:hover {
    background-color: #a13d32;
    /* transition-delay:1s; */
    color: white;
    opacity:1;  
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
    background-size: cover;
}

.charsheet button[type=action].button_creation1:hover,
.charsheet button[type=action].button_creation2:hover {
    box-shadow: 3px 3px 5px 1px red;
}


/* Gestion des affichage */

div.personnage,
div.creation,
div.creation_header_general {
    display: none;
}

.charsheet .creation_active[value="1"] ~ div.creation,
.charsheet .creation_active[value="1"] ~ div.creation_header_general,
.charsheet .creation_active[value="0"] ~ div.personnage {
    display: block;
}

div.page_1,
div.page_2,
div.page_3,
div.page_4,
div.page_5,
div.page_7 {
    display: none;
}

.charsheet .choix_page[value="0"] ~ div.page_1,
.charsheet .choix_page[value="1"] ~ div.page_2,
.charsheet .choix_page[value="2"] ~ div.page_3,
.charsheet .choix_page[value="3"] ~ div.page_4,
.charsheet .choix_page[value="4"] ~ div.page_5,
.charsheet .choix_page[value="7"] ~ div.page_7 {
    display: block;
}

.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="7"] ~ div .button7 {color: var(--color_text_button_selected); background: var(--color_background_button_selected);}

div .button0 {    
    background-color: #f5eadb;
}

div .button1,
div .button2,
div .button3,
div .button4 {
    margin-left: -5px;    
    background-color: #f5eadb;
}

div .button5,
div .button6,
div .button7 {
    float: right;
    margin-top: 2px;
    background-color: #f5eadb;
}

div.arkcoeur_1,
div.arkcoeur_2,
div.arkcoeur_3,
div.arkcoeur_4,
div.arkcoeur_5,
div.arkcoeur_6,
div.arkcoeur_7,
div.arkcoeur_8,
div.arkcoeur_9,
div.arkcoeur_10 {
    display: none;
}

.charsheet .arkoeur_valeur_class[value="0"] ~ div.arkcoeur_1,
.charsheet .arkoeur_valeur_class[value="1"] ~ div.arkcoeur_1,
.charsheet .arkoeur_valeur_class[value="2"] ~ div.arkcoeur_2,
.charsheet .arkoeur_valeur_class[value="3"] ~ div.arkcoeur_3,
.charsheet .arkoeur_valeur_class[value="4"] ~ div.arkcoeur_4,
.charsheet .arkoeur_valeur_class[value="5"] ~ div.arkcoeur_5,
.charsheet .arkoeur_valeur_class[value="6"] ~ div.arkcoeur_6,
.charsheet .arkoeur_valeur_class[value="7"] ~ div.arkcoeur_7,
.charsheet .arkoeur_valeur_class[value="8"] ~ div.arkcoeur_8,
.charsheet .arkoeur_valeur_class[value="9"] ~ div.arkcoeur_9,
.charsheet .arkoeur_valeur_class[value="10"] ~ div.arkcoeur_10
 {
    display: block;
}

div.page1_popup_espece,
div.peuple_1,
div.peuple_2,
div.peuple_3,
div.peuple_4,
div.peuple_5,
div.peuple_6,
div.peuple_7,
div.peuple_8,
div.peuple_9,
div.peuple_10,
div.peuple_11,
div.peuple_12,
div.peuple_13 {
    display: none;
}

.charsheet .popup_open[value="1"] ~ div.page1_popup_espece,
.charsheet .choix_peuple[value="1"] ~ div.peuple_1,
.charsheet .choix_peuple[value="2"] ~ div.peuple_2,
.charsheet .choix_peuple[value="3"] ~ div.peuple_3,
.charsheet .choix_peuple[value="4"] ~ div.peuple_4,
.charsheet .choix_peuple[value="5"] ~ div.peuple_5,
.charsheet .choix_peuple[value="6"] ~ div.peuple_6,
.charsheet .choix_peuple[value="7"] ~ div.peuple_7,
.charsheet .choix_peuple[value="8"] ~ div.peuple_8,
.charsheet .choix_peuple[value="9"] ~ div.peuple_9,
.charsheet .choix_peuple[value="10"] ~ div.peuple_10,
.charsheet .choix_peuple[value="11"] ~ div.peuple_11,
.charsheet .choix_peuple[value="12"] ~ div.peuple_12,
.charsheet .choix_peuple[value="13"] ~ div.peuple_13
 {
    display: block;
}

div.creation_4_archetype1_info_1,
div.creation_4_archetype1_info_2,
div.creation_4_archetype1_info_3,
div.creation_4_archetype1_info_4,
div.creation_4_archetype1_info_5,
div.creation_4_archetype1_info_6,
div.creation_4_archetype1_info_7,
div.creation_4_archetype1_info_8,
div.creation_4_archetype2_info_1,
div.creation_4_archetype2_info_2,
div.creation_4_archetype2_info_3,
div.creation_4_archetype2_info_4,
div.creation_4_archetype2_info_5,
div.creation_4_archetype2_info_6,
div.creation_4_archetype2_info_7,
div.creation_4_archetype2_info_8 {
    display: none;
}

.charsheet .choix_archetype_1[value="1"] ~ div.creation_4_archetype1_info_1,
.charsheet .choix_archetype_1[value="2"] ~ div.creation_4_archetype1_info_2,
.charsheet .choix_archetype_1[value="3"] ~ div.creation_4_archetype1_info_3,
.charsheet .choix_archetype_1[value="4"] ~ div.creation_4_archetype1_info_4,
.charsheet .choix_archetype_1[value="5"] ~ div.creation_4_archetype1_info_5,
.charsheet .choix_archetype_1[value="6"] ~ div.creation_4_archetype1_info_6,
.charsheet .choix_archetype_1[value="7"] ~ div.creation_4_archetype1_info_7,
.charsheet .choix_archetype_1[value="8"] ~ div.creation_4_archetype1_info_8,
.charsheet .choix_archetype_2[value="1"] ~ div.creation_4_archetype2_info_1,
.charsheet .choix_archetype_2[value="2"] ~ div.creation_4_archetype2_info_2,
.charsheet .choix_archetype_2[value="3"] ~ div.creation_4_archetype2_info_3,
.charsheet .choix_archetype_2[value="4"] ~ div.creation_4_archetype2_info_4,
.charsheet .choix_archetype_2[value="5"] ~ div.creation_4_archetype2_info_5,
.charsheet .choix_archetype_2[value="6"] ~ div.creation_4_archetype2_info_6,
.charsheet .choix_archetype_2[value="7"] ~ div.creation_4_archetype2_info_7,
.charsheet .choix_archetype_2[value="8"] ~ div.creation_4_archetype2_info_8 {
    display: block;
}


/* Modelage input et autres */

.charsheet input.input_classique_1,
.charsheet input.input_custom,
.charsheet input.input_sortilege_nom,
.charsheet input.input_sortilege_encart,
.charsheet input.input_sortilege_encart_gros,
.charsheet input.input_specialite {
    width: 100% !important;
    border: none;
    border-radius: 1px;
    margin-top: 0px;
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 0px;
    letter-spacing: 0px;
    color: var(--text_input);
    font-family: "Faculty Glyphic", sans-serif;
}


.charsheet input.input_classique_1 { 
    height: 30px !important;
    border-radius: 1px;
    margin-top: -10px;
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 0px;
    letter-spacing: 0px;
    text-align: center;
    font-size: 16px;
}

.charsheet input.input_custom {  
    width: 97% !important;
    margin-right: 2px;
    height: 15px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: -0.8px;
    text-align: right;
    padding-bottom: 3px;
    font-family: "Radio Canada", sans-serif;
}

.charsheet input.input_sortilege_nom {  
    width: 100% !important;
    margin-right: 0px;
    height: 27px;
    font-size: 13px;
    text-transform: uppercase;
    /* letter-spacing: -0.8px; */
    padding-bottom: 5px;
    text-align: left;
    padding-left: 5px;
}

.charsheet input.input_sortilege_encart,
.charsheet input.input_sortilege_encart_gros {   
    width: 100% !important;
    margin-right: 0px;
    height: 43px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: -0.8px;
    padding-left: 0px;
    padding-bottom: 0px;
    text-align: center;
    margin-top: 2px;
}

.charsheet input.input_sortilege_encart_gros {   
    font-size: 13px;
}

.charsheet input.input_carac,
.charsheet input.input_carac_valeur,
.charsheet input.input_carac_xp,
.charsheet input.input_ark_valeur,
.charsheet input.input_malus_fd {
    width: 20px !important;
    height: 20px;
    border: none;
    border-radius: 1px;
    background-color: transparent;
    color: var(--black);
    text-align: center;
    font-size: 14px;
    padding: 0;
    padding-bottom: 1px;
}

.charsheet input.input_carac {
    padding-bottom: 0px;
}

.charsheet input.input_carac_valeur,
.charsheet input.input_carac_xp {
    padding-bottom: 2px;
    margin-top: 0px;
    margin-bottom: 1px;
}

.charsheet input.input_ark_valeur {
    padding-bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 42px !important;
    height: 34px !important;
    font-size: 20px;
    padding-top: 2px;
}

.charsheet input.input_malus_fd {
    padding-bottom: 4px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 28px !important;
    height: 23px !important;
    font-size: 18px;
    padding-top: 0px;
}

.charsheet textarea.specialite {
    width: 96%;
    height: 90%;
    letter-spacing: -0.8px;
    /* background-color: #00800029; */
    font-family: "Faculty Glyphic", sans-serif;
}


.charsheet input.input_specialite {
    font-size : 12px;
}

.charsheet textarea.equipement {
    width: 100%;
    height: 100%;
    letter-spacing: -0.8px;
    padding: 10px;
    font-family: "Faculty Glyphic", sans-serif;
    /* background-color: #00800029; */
}

.charsheet textarea.sortilege_description {
    width: 99%;
    height: 87%;
    letter-spacing: -0.8px;
    font-family: "Faculty Glyphic", sans-serif;
    /* background-color: #00800029; */
}

.charsheet textarea.carnet_route {
    margin-left: 104px;
    margin-top: 99px;
    width: 71%;
    height: 79%;
    letter-spacing: -0.8px;
    font-family: "Faculty Glyphic", sans-serif;
    background-color: #ffffff80;
    padding: 20px;
}

.charsheet select.input_peuple,
.charsheet select.input_archetype { 
    border: none;
    border-radius: 1px;
    outline: none;
    cursor: pointer;
    margin-bottom: 0px;
    margin-top: -5px;
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 2px;
    padding-right: 10px;
    padding-bottom: 0px;
    width: 347px;
    text-align: center;
    height: 27px;
    font-family: "Faculty Glyphic", sans-serif;
    font-size: 16px;
    color: var(--text_input);
}

.charsheet select.input_archetype { 
    width: 168px;
    background: transparent;
}


/* Cadre des pages */

div.page_1 {    
    width: 830px;
    height: 1462px;
	background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_personnage_full.webp);
    background-size: cover;
	background-repeat: no-repeat;
}

div.page_2 {    
    width: 830px;
    height: 1112px;
	background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_page2.webp);
    background-size: cover;
	background-repeat: no-repeat;
}

div.page_3 {
    width: 830px;
    height: 2073px;
	background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_magie.webp);
    background-size: cover;
	background-repeat: no-repeat;
}

div.page_5 {
    width: 830px;
    height: 1112px;
	background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_carnet.webp);
    background-size: cover;
	background-repeat: no-repeat;
}

div.page_7 {
    width: 830px;
    height: 800px;
	background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_carnet.webp);
    background-size: cover;
	background-repeat: no-repeat;
}

div.creation_header_general {
    width: 830px;
    height: 117px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_header_creation.webp);
    background-size: contain;
    font-size: 13px;
}

div.creation {
    width: 830px;
    /* height: 1112px; */
	background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_fond_creation.webp);
    background-size: 830px auto;
    font-size: 13px;
}

/* Structure générale de la page_1 */

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

.page1_zone_nom {  
    grid-column: 5 / 80;
    grid-row: 6 / 15;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_artisan {  
    grid-column: 9 / 31;
    grid-row: 16 / 35;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_artiste {   
    grid-column: 9 / 31;
    grid-row: 36 / 55;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_combattant {  
    grid-column: 9 / 31;
    grid-row: 56 / 75;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_erudit {  
    grid-column: 9 / 31;
    grid-row: 77 / 95;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_explorateur {  
    grid-column: 54 / 76;
    grid-row: 16 / 35;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_magicien {  
    grid-column: 54 / 76;
    grid-row: 36 / 55;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_roublard {  
    grid-column: 54 / 76;
    grid-row: 56 / 75;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_stratege {  
    grid-column: 54 / 76;
    grid-row: 77 / 95;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_ark {  
    grid-column: 33 / 52;
    grid-row: 16 / 66;
    margin-top: -9px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_blessure {  
    grid-column: 33 / 52;
    grid-row: 69 / 90;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_specialite_1 {  
    grid-column: 6 / 42;
    grid-row: 100 / 144;
    margin-top: 4px;
    margin-left: 10px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.page1_zone_specialite_2 { 
    grid-column: 43 / 80;
    grid-row: 100 / 144;
    margin-top: 4px;
    margin-left: 15px;
    margin-right: 5px;
    /* background-color: #44ff0073; */
}

.page1_popup_espece { 
    grid-column: 11 / 75;
    grid-row: 16 / 48;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border: 2px solid gray;
    border-radius: 15px;
    padding: 10px;
    font-size: 14px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
    background-size: cover;
    box-shadow: 0px 0px 7px 4px #793028de;
    z-index: 1;
}

/* Structure zone Popup */

.popup_titre {
    grid-column: 21 / 59;
    grid-row: 1;
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 0px;
    background-color: #44ff0073;
    font-size: 28px;
    text-decoration: underline;
}

.popup_A1,
.popup_A2,
.popup_A3,
.popup_A4,
.popup_A5,
.popup_A6,
.popup_A7,
.popup_A8,
.popup_A9,
.popup_A10,
.popup_A11,
.popup_A12,
.popup_A13 {
    grid-column: 1 / 20;
    grid-row: 5 / 30;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
    
    background-size: contain;
    background-repeat: no-repeat;
}


.popup_A1 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_01-min.png);
    margin-top: -23px;
    margin-left: -11px;
}

.popup_A2 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_02-min.png);
    margin-top: -23px;
    margin-left: -7px;
}

.popup_A3 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_03-min.png);
    margin-left: -59px;
    width: 322px;
    margin-top: -9px;
}

.popup_A4 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_04-min.png);
}

.popup_A5 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_05-min.png);
    margin-left: 8px;
    width: 322px;
    margin-top: -43px;
}

.popup_A6 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_06-min.png);  
    margin-left: -65px;
    width: 265px;
    margin-top: -4px;
}

.popup_A7 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_07-min.png);  
    margin-left: -52px;
    width: 322px;
    margin-top: -43px;
}

.popup_A8 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_08-min.png);
    margin-top: -40px;
    margin-left: -25px;
}

.popup_A9 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_09-min.png); 
    margin-left: 9px;
    width: 172px;
    margin-top: -60px;
}

.popup_A10 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_10-min.png);    
    margin-top: -50px;
}

.popup_A11 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_11-min.png);
    margin-top: -56px;
    width: 247px;
    margin-left: -31px;
}

.popup_A12 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_12-min.png);
    margin-top: -53px;
    width: 257px;
    margin-left: -25px;
}

.popup_A13 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/peuple_13-min.png);
    margin-top: -40px;
    width: 267px;
    margin-left: -20px;
}

.popup_texte { 
    grid-column: 22 / 62;
    grid-row: 5 / 30;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 13px;
    line-height: 20px;
    display: flex;
    align-items: center;
}

.popup_close {
    grid-column: 61;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

/* Structure zone ARK */

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

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

.wrapper_cercle_ark {
    display: grid;
    grid-template-columns: repeat(830, 1px);
    grid-auto-rows: 1px;
}

.arksonge {  
    grid-column: 1;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.arkentropie {  
    grid-column: 1;
    grid-row: 17;
    margin-top: 2px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.arkoeur {  
    grid-column: 1;
    grid-row: 33;
    margin-top: 7px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.circulaire_ark {  
    grid-column: 1 / 20;
    grid-row: 1 / 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.valeur_ark {  
    grid-column: 8 / 13;
    grid-row: 10 / 14;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 4px;
    margin-right: 3px;
    /* background-color: #44ff0073; */
}

.jet_arksonge {  
    grid-column: 5 / 16;
    grid-row: 14 / 17;
    margin-top: -5px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.jet_arkentropie {  
    grid-column: 4 / 17;
    grid-row: 14 / 17;
    margin-top: -5px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.jet_arkoeur {  
    grid-column: 6 / 16;
    grid-row: 13 / 16;
    margin-top: 5px;
    margin-bottom: 2px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_reset {
    grid-column: 71 / 121;
    grid-row: 37 / 89;
    margin-top: -3px;
    margin-left: -3px;
    margin-right: 0px;
}

.ark_check_1 {
    grid-column: 53;
    grid-row: 72;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_2 {
    grid-column: 47;
    grid-row: 54;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_3 {
    grid-column: 50;
    grid-row: 36;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_4 {
    grid-column: 63;
    grid-row: 19;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_5 {
    grid-column: 80;
    grid-row: 11;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_6 {
    grid-column: 98;
    grid-row: 11;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_7 {
    grid-column: 114;
    grid-row: 19;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_8 {
    grid-column: 126;
    grid-row: 36;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_9 {
    grid-column: 129;
    grid-row: 54;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.ark_check_10 {
    grid-column: 123;
    grid-row: 72;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}


/* Structure zone blessures */

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

.wrapper_bloc_blessure,
.wrapper_bloc_blessure_1,
.wrapper_bloc_blessure_2,
.wrapper_bloc_blessure_3,
.wrapper_bloc_blessure_4,
.wrapper_bloc_blessure_5,
.wrapper_bloc_blessure_6 {
    display: grid;
    grid-template-columns: repeat(830, 1px);;
    grid-auto-rows: 10px;
}

.wrapper_bloc_blessure_1 {
   margin-left: 43px;
}

.wrapper_bloc_blessure_2 {
   margin-left: 35px;
}

.wrapper_bloc_blessure_3 {
   margin-left: 26px;
}

.wrapper_bloc_blessure_4 {
   margin-left: 18px;
}

.wrapper_bloc_blessure_5 {
   margin-left: 9px;
}

.wrapper_bloc_blessure_6 {
   margin-left: 0px;
}

.reset_blessure { 
    grid-column: 1;
    grid-row: 5;
    margin-top: 2px;
    margin-left: 46px;
    margin-right: 0px;
    background: red;
}

.legere { 
    grid-column: 1;
    grid-row: 5;
    margin-top: 2px;
    margin-left: 46px;
    margin-right: 0px;
}

.grave { 
    grid-column: 1;
    grid-row: 10;
    margin-top: 1px;
    margin-left: 46px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.critique {
    grid-column: 1;
    grid-row: 15;
    margin-top: 0px;
    margin-left: 46px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.bloc_malus_fd {  
    grid-column: 14 / 17;
    grid-row: 18 / 21;
    margin-top: 6px;
    margin-left: 0px;
    margin-right: 0px;
}

.bloc_armure {  
    grid-column: 4 / 7;
    grid-row: 18 / 21;
    margin-top: 6px;
    margin-left: 3px;
    margin-right: -3px;
}

.blessure_check_1 {  
    grid-column: 1;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.blessure_check_2 {  
    grid-column: 18;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.blessure_check_3 {  
    grid-column: 35;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.blessure_check_4 {  
    grid-column: 52;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.blessure_check_5 {  
    grid-column: 69;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.blessure_check_6 {  
    grid-column: 86;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

/* Structure zone specialité */

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

.specialite_1_check {  
    grid-column: 2;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_2_check {  
    grid-column: 2;
    grid-row: 2;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_3_check {  
    grid-column: 2;
    grid-row: 3;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_4_check {  
    grid-column: 2;
    grid-row: 4;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_5_check {  
    grid-column: 2;
    grid-row: 5;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_6_check {  
    grid-column: 2;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_7_check {  
    grid-column: 2;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_8_check {  
    grid-column: 2;
    grid-row: 8;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_9_check {  
    grid-column: 2;
    grid-row: 9;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_10_check {  
    grid-column: 2;
    grid-row: 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_11_check {  
    grid-column: 2;
    grid-row: 11;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_12_check {  
    grid-column: 2;
    grid-row: 12;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_13_check {  
    grid-column: 2;
    grid-row: 13;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_14_check {  
    grid-column: 2;
    grid-row: 14;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_1 {  
    grid-column: 4 / 36;
    grid-row: 1;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_2 {  
    grid-column: 4 / 36;
    grid-row: 2;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_3 {  
    grid-column: 4 / 36;
    grid-row: 3;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_4 {  
    grid-column: 4 / 36;
    grid-row: 4;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_5 {  
    grid-column: 4 / 36;
    grid-row: 5;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_6 {  
    grid-column: 4 / 36;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_7 {  
    grid-column: 4 / 36;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_8 {  
    grid-column: 4 / 36;
    grid-row: 8;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_9 {  
    grid-column: 4 / 36;
    grid-row: 9;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_10 {  
    grid-column: 4 / 36;
    grid-row: 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_11 {  
    grid-column: 4 / 36;
    grid-row: 11;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_12 {  
    grid-column: 4 / 36;
    grid-row: 12;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_13 {  
    grid-column: 4 / 36;
    grid-row: 13;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_14 {  
    grid-column: 4 / 36;
    grid-row: 14;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.specialite_1,
.specialite_2,
.specialite_3,
.specialite_4,
.specialite_5,
.specialite_6,
.specialite_7,
.specialite_8,
.specialite_9,
.specialite_10,
.specialite_11,
.specialite_12,
.specialite_13,
.specialite_14 {  
    grid-column: 5 / 36;
}

/* Structure générale de la page_2 */

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

.equipement_armes { 
    grid-column: 7 / 78;
    grid-row: 14 / 24;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 3px;
    /* background-color: #44ff0073; */
}

.equipement_ark { 
    grid-column: 7 / 48;
    grid-row: 28 / 50;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    /* background-color: #44ff0073; */
}

.equipement_apparence { 
    grid-column: 51 / 78;
    grid-row: 28 / 42;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    /* background-color: #44ff0073; */
}

.equipement_richesse {  
    grid-column: 51 / 78;
    grid-row: 45 / 51;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 4px;
    /* background-color: #44ff0073; */
}

.equipement_sac { 
    grid-column: 7 / 48;
    grid-row: 54 / 75;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    /* background-color: #44ff0073; */
}

.equipement_bibliotheque { 
    grid-column: 51 / 78;
    grid-row: 54 / 75;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    /* background-color: #44ff0073; */
}

/* Structure générale Sortilège */

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

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

.sortilege_1 {  
    grid-column: 7 / 78;
    grid-row: 12 / 30;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_2 {
    grid-column: 7 / 78;
    grid-row: 31 / 49;
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_3 { 
    grid-column: 7 / 78;
    grid-row: 50 / 68;
    margin-top: 4px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_4 {  
    grid-column: 7 / 78;
    grid-row: 69 / 87;
    margin-top: 6px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_5 {    
    grid-column: 7 / 78;
    grid-row: 89 / 106;
    margin-top: -2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_6 {  
    grid-column: 7 / 78;
    grid-row: 108 / 126;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_7 {
    grid-column: 7 / 78;
    grid-row: 127 / 145;
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_8 { 
    grid-column: 7 / 78;
    grid-row: 146 / 164;
    margin-top: 4px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_9 {  
    grid-column: 7 / 78;
    grid-row: 165 / 183;
    margin-top: 6px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_10 {    
    grid-column: 7 / 78;
    grid-row: 185 / 203;
    margin-top: -2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.sortilege_nom {  
    grid-column: 19 / 71;
    grid-row: 1 / 4;
    margin-top: 0px;
    margin-left: 4px;
    margin-right: 0px;
    margin-bottom: 7px;
    /* background-color: #44ff0073; */
}

.sortilege_competence { 
    grid-column: 2 / 19;
    grid-row: 5 / 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    /* background-color: #44ff0073; */
}

.sortilege_pm { 
    grid-column: 19 / 30;
    grid-row: 5 / 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 4px;
    margin-bottom: 5px;
    /* background-color: #44ff0073; */
}

.sortilege_fd { 
    grid-column: 29 / 40;
    grid-row: 5 / 10;
    margin-top: 0px;
    margin-left: 6px;
    margin-right: 0px;
    margin-bottom: 5px;
    /* background-color: #44ff0073; */
}

.sortilege_portee { 
    grid-column: 40 / 51;
    grid-row: 5 / 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 6px;
    margin-bottom: 5px;
    /* background-color: #44ff0073; */
}

.sortilege_zone { 
    grid-column: 50 / 61;
    grid-row: 5 / 10;
    margin-top: 0px;
    margin-left: 4px;
    margin-right: 0px;
    margin-bottom: 5px;
    /* background-color: #44ff0073; */
}

.sortilege_duree { 
    grid-column: 61 / 71;
    grid-row: 5 / 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 5px;
    /* background-color: #44ff0073; */
}

.sortilege_description {
    grid-column: 7 / 71;
    grid-row: 9 / 19;
    margin-top: 5px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    /* background-color: #ff000078; */
}

.sortilege_annonce { 
    grid-column: 2 / 5;
    grid-row: 9 / 13;
    margin-top: 6px;
    margin-left: 12px;
    margin-right: 0px;
    margin-bottom: 7px;
    /* background-color: #ff000078; */
}


/* Structure générale de la page_3 */
/* Structure générale des zones */

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

.wrapper_zone_bloc_1,
.wrapper_zone_bloc_2,
.wrapper_zone_bloc_3,
.wrapper_zone_bloc_4,
.wrapper_zone_bloc_5,
.wrapper_zone_bloc_6,
.wrapper_zone_bloc_7,
.wrapper_zone_bloc_8 {
    display: grid;
    grid-template-columns: repeat(100, 10px);;
    grid-auto-rows: 10.6px;
    font-size: 15px;
}

.wrapper_zone_bloc_1,
.wrapper_zone_bloc_5 {
    margin-left: 4px;
    margin-top: -7px;
}

.wrapper_zone_bloc_2,
.wrapper_zone_bloc_6 {
    margin-left: 4px;
    margin-top: -4px;
}

.wrapper_zone_bloc_3,
.wrapper_zone_bloc_7 {
    margin-left: 4px;
    margin-top: 0px;
}

.wrapper_zone_bloc_4,
.wrapper_zone_bloc_8 {
    margin-left: 4px;
    margin-top: -7px;
}

.wrapper_zone_bloc_5 {
    margin-left: -2px;
}

.wrapper_zone_bloc_6 {
    margin-left: -2px;
}

.wrapper_zone_bloc_7 {
    margin-left: -2px;
}

.wrapper_zone_bloc_8 {
    margin-left: -2px;
}

/* Structure bloc nom */

.zone_nom_nom {
    grid-column: 2 / 37;
    grid-row: 2 / 5;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 0px;
}

.zone_nom_archetype_1 {  
    grid-column: 40 / 57;
    grid-row: 2 / 5;
    margin-top: -2px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    /* background: green; */
}

.zone_nom_archetype_2 {  
    grid-column: 58 / 75;
    grid-row: 2 / 5;
    margin-top: -2px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    /* background: green; */
}

.zone_nom_peuple {  
    grid-column: 2 / 37;
    grid-row: 7 / 10;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 0px;
}

.zone_nom_origine {  
    grid-column: 40 / 75;
    grid-row: 7 / 10;
    margin-top: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
}

/* Structure bloc metier */

.zone_bloc_xp {  
    grid-column: 2 / 4;
    grid-row: 7 / 9;
    margin-top: 0px;
    margin-left: -1px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.zone_bloc_texte_1 {   
    grid-column: 2 / 16;
    grid-row: 4 / 6;  
    margin-top: -2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_texte_2 {   
    grid-column: 4 / 16;
    grid-row: 6 / 8;  
    margin-top: -2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_texte_3 {   
    grid-column: 4 / 16;
    grid-row: 8 / 10;  
    margin-top: -2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_texte_4 {   
    grid-column: 2 / 16;
    grid-row: 10 / 12;  
    margin-top: -2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_texte_5 {   
    grid-column: 2 / 16;
    grid-row: 12 / 14;  
    margin-top: -2px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_roll_6 {   
    grid-column: 2 / 4;
    grid-row: 14 / 16;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_roll_7 {   
    grid-column: 2 / 4;
    grid-row: 16 / 18;
    margin-top: 0px;
    margin-left: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_texte_6 {   
    grid-column: 4 / 16;
    grid-row: 14 / 16;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_texte_7 {   
    grid-column: 4 / 16;
    grid-row: 16 / 18;
    margin-top: 0px;
    margin-left: 0px;
    /* background-color: #44ff0073; */
    text-align: right;
}

.zone_bloc_valeur_1 {  
    grid-column: 17 / 20;
    grid-row: 4 / 6;
    margin-top: 0px;
    margin-left: 0px;  
    margin-right: 6px;
    /* background-color: #44ff0073; */
}

.zone_bloc_valeur_2 {   
    grid-column: 17 / 20;
    grid-row: 6 / 8;
    margin-top: 0px;
    margin-left: 0px;  
    margin-right: 6px;
    /* background-color: #44ff0073; */
}

.zone_bloc_valeur_3 {   
    grid-column: 17 / 20;
    grid-row: 8 / 10;
    margin-top: 0px;
    margin-left: 0px;  
    margin-right: 6px;
    /* background-color: #44ff0073; */
}

.zone_bloc_valeur_4 {  
    grid-column: 17 / 20;
    grid-row: 10 / 12;
    margin-top: 0px;
    margin-left: 0px;  
    margin-right: 6px;
    /* background-color: #44ff0073; */
}

.zone_bloc_valeur_5 {   
    grid-column: 17 / 20;
    grid-row: 12 / 14;
    margin-top: 0px;
    margin-left: 0px;  
    margin-right: 6px;
    /* background-color: #44ff0073; */
}

.zone_bloc_valeur_6 {   
    grid-column: 17 / 20;
    grid-row: 14 / 16;
    margin-top: 0px;
    margin-left: 0px;  
    margin-right: 6px;
    /* background-color: #44ff0073; */
}

.zone_bloc_valeur_7 {   
    grid-column: 17 / 20;
    grid-row: 16 / 18;
    margin-top: 0px;
    margin-left: 0px;  
    margin-right: 6px;
    /* background-color: #44ff0073; */
}

.zone_bloc_xp_1 {  
    grid-column: 20 / 22;
    grid-row: 4 / 6;
    margin-top: 0px;
    margin-left: -2px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.zone_bloc_xp_2 {  
    grid-column: 20 / 22;
    grid-row: 6 / 8;
    margin-top: 0px;
    margin-left: -2px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.zone_bloc_xp_3 {  
    grid-column: 20 / 22;
    grid-row: 8 / 10;
    margin-top: 0px;
    margin-left: -2px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.zone_bloc_xp_4 {  
    grid-column: 20 / 22;
    grid-row: 10 / 12;
    margin-top: 0px;
    margin-left: -2px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.zone_bloc_xp_5 {  
    grid-column: 20 / 22;
    grid-row: 12 / 14;
    margin-top: 0px;
    margin-left: -2px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.zone_bloc_xp_6 {  
    grid-column: 20 / 22;
    grid-row: 14 / 16;
    margin-top: 0px;
    margin-left: -2px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.zone_bloc_xp_7 {  
    grid-column: 20 / 22;
    grid-row: 16 / 18;
    margin-top: 0px;
    margin-left: -2px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

/* Structure générale de la creation */

.charsheet input.input_classique_creation {
    height: 30px !important;
    border-radius: 1px;
    margin-top: -10px;
    margin-right: 0px;
    margin-left: 0px;
    padding-left: 0px;
    letter-spacing: 0px;
    text-align: center;
    font-size: 16px;
    background: #ffffff78;
    border-radius: 10px;
}

div.page_creation {
    padding-top: 0px;
    padding-left: 105px;
}


div.creation_back,
div.creation_2,
div.creation_3,
div.creation_4,
div.creation_5,
div.creation_6,
div.creation_7,
div.creation_8,
div.creation_9 {
    display: none;
}

.charsheet .etape_creation1[value="0"] ~ div.creation_1 {
    display: none;
}

.charsheet .etape_creationback[value="1"] ~ div.creation_back,
.charsheet .etape_creation2[value="1"] ~ div.creation_2,
.charsheet .etape_creation3[value="1"] ~ div.creation_3,
.charsheet .etape_creation4[value="1"] ~ div.creation_4,
.charsheet .etape_creation5[value="1"] ~ div.creation_5,
.charsheet .etape_creation6[value="1"] ~ div.creation_6,
.charsheet .etape_creation7[value="1"] ~ div.creation_7,
.charsheet .etape_creation8[value="1"] ~ div.creation_8,
.charsheet .etape_creation9[value="1"] ~ div.creation_9 {
    display: block;
}

.wrapper_page_creation_global {  
    display: grid;
    grid-template-columns: repeat(63, 9px);
    grid-auto-rows: 10px;
    margin-left: 30px;
}

.wrapper_creation_info {
    display: grid;
    grid-template-columns: repeat(63, 9px);
    grid-auto-rows: 10px;
}

.creation_1,
.creation_back,
.creation_2,
.creation_3,
.creation_4,
.creation_5,
.creation_6,
.creation_7,
.creation_8,
.creation_9 {
    width: 630px;
}

.creation_1 {
    /* background: orange; */
    height: 400px;
}

.creation_back {  
    height: 50px;
    margin-bottom: 20px;
    /* background: green; */
}

.creation_2 {
    grid-column: 1 / 64;
    grid-row: 1;
    margin-top: 0px;
    /* background: blue; */
}

.creation_3 {
    grid-column: 1 / 64;
    grid-row: 1;
    margin-top: 0px;
    /* background: yellow; */
}

.creation_4 {
    grid-column: 1 / 64;
    grid-row: 1;
    margin-top: 0px;
    /* background: grey; */
}

.creation_5 {
    grid-column: 1 / 64;
    grid-row: 1;
    margin-top: 0px;
    /* background: purple; */
}

.creation_6 {
    grid-column: 1 / 64;
    grid-row: 1;
    margin-top: 0px;
}

.creation_7 {
    grid-column: 1 / 64;
    grid-row: 1;
    margin-top: 0px;
}

.creation_8 {
    grid-column: 1 / 64;
    grid-row: 1;
    margin-top: 0px;
}

.creation_footer {
    height: 60px;
}

.wrapper_page_creation {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 10px; 
}

.creation_back_retour {
    margin-left: 647px;
    margin-top: 0px;
    padding-top: 55px;
}

.creation_header { 
    grid-column: 11 / 54;
    grid-row: 2;
    height: 15px;
    margin-top: 14px;
    margin-left: 0px;
    margin-bottom: 10px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
    /* border-bottom: 1px solid grey; */
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/separateur.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.creation_1_texte,
.creation_2_texte,
.creation_3_texte,
.creation_4_texte,
.creation_5_texte,
.creation_6_texte,
.creation_7_texte,
.creation_8_texte,
.creation_9_texte {
    font-size: 19px;
}


.creation_1_texte {  
    grid-column: 11 / 54;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_1_creation {  
    grid-column: 5 / 30;
    grid-row: 10 / 35;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: #44ff0073; */
}

.creation_1_page_personnage {  
    grid-column: 35 / 60;
    grid-row: 10 / 35;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    /* background-color: red; */
}

.creation_1_creation_texte {  
    grid-column: 5 / 30;
    grid-row: 35;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 50px;
}

.creation_1_page_personnage_texte {  
    grid-column: 35 / 60;
    grid-row: 35;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 50px;
}

.creation_2_encart {
    grid-column: 3 / 62;
    grid-row: 1 / 14;
    margin-top: 32px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
    background: rgba(255, 0, 0, 0.301);
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
    background-size: cover;
    box-shadow: 2px 2px 12px 2px #000000bf;
    border-radius: 10px;
}

.creation_2_texte {
    grid-column: 11 / 54;    
    grid-row: 2;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
}

.creation_2_peuple { 
    grid-column: 1 / 64;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_2_peuple_info { 
    grid-column: 1 / 64;
    grid-row: 8;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_2_suivant { 
    grid-column: 40 / 68;
    grid-row: 12;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
}

.creation_3_texte {  
    grid-column: 11 / 54;
    grid-row: 3;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_3_encart {
    grid-column: 3 / 62;
    grid-row: 2 / 12;
    margin-top: 32px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
    background-size: cover;
    box-shadow: 2px 2px 12px 2px #000000bf;
    border-radius: 10px;
}

.creation_3_nom {  
    grid-column: 5 / 30;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    text-align: center;
    font-size: 17px;
    text-decoration: underline;
}

.creation_3_origine {  
    grid-column: 35 / 60;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 17px;
    text-decoration: underline;
}

.creation_3_nom_data {  
    grid-column: 5 / 30;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
}

.creation_3_origine_data {  
    grid-column: 35 / 60;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
}

.creation_3_suivant {
    grid-column: 40 / 68;
    grid-row: 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
}

.creation_4_encart {
    grid-column: 3 / 62;
    grid-row: 2 / 13;
    margin-top: 32px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
    background-size: cover;
    box-shadow: 2px 2px 12px 2px #000000bf;
    border-radius: 10px;
}

.creation_4_texte {  
    grid-column: 11 / 54;
    grid-row: 3;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_4_archetype1 {  
    grid-column: 5 / 30;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 17px;
    text-decoration: underline;
}

.creation_4_archetype2 {  
    grid-column: 35 / 60;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 17px;
    text-decoration: underline;
}

.creation_4_archetype1_data {  
    grid-column: 5 / 30;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.creation_4_archetype2_data {  
    grid-column: 35 / 60;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}


div.creation_4_archetype1_info_1,
div.creation_4_archetype1_info_2,
div.creation_4_archetype1_info_3,
div.creation_4_archetype1_info_4,
div.creation_4_archetype1_info_5,
div.creation_4_archetype1_info_6,
div.creation_4_archetype1_info_7,
div.creation_4_archetype1_info_8 {  
    grid-column: 5 / 30;
    grid-row: 9;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-size : cover;
    background-repeat: no-repeat;  
    height: 250px;
}

div.creation_4_archetype2_info_1,
div.creation_4_archetype2_info_2,
div.creation_4_archetype2_info_3,
div.creation_4_archetype2_info_4,
div.creation_4_archetype2_info_5,
div.creation_4_archetype2_info_6,
div.creation_4_archetype2_info_7,
div.creation_4_archetype2_info_8 {
    grid-column: 35 / 60;
    grid-row: 9;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-size : cover;
    background-repeat: no-repeat;  
    height: 250px;
}

div.creation_4_archetype1_info_1,
div.creation_4_archetype2_info_1 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_artisan.webp);
    background-size : cover;
    background-repeat: no-repeat;
}

div.creation_4_archetype1_info_2,
div.creation_4_archetype2_info_2 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_artiste.webp);
    background-size : cover;
    background-repeat: no-repeat;
}

div.creation_4_archetype1_info_3,
div.creation_4_archetype2_info_3 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_combattant.webp);
    background-size : cover;
    background-repeat: no-repeat;
}

div.creation_4_archetype1_info_4,
div.creation_4_archetype2_info_4 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_erudit.webp);
    background-size : cover;
    background-repeat: no-repeat;
}

div.creation_4_archetype1_info_5,
div.creation_4_archetype2_info_5 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_explorateur.webp);
    background-size : cover;
    background-repeat: no-repeat;
}

div.creation_4_archetype1_info_6,
div.creation_4_archetype2_info_6 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_magicien.webp);
    background-size : cover;
    background-repeat: no-repeat;
}

div.creation_4_archetype1_info_7,
div.creation_4_archetype2_info_7 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_roublard.webp);
    background-size : cover;
    background-repeat: no-repeat;
}

div.creation_4_archetype1_info_8,
div.creation_4_archetype2_info_8 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/comp_stratege.webp);
    background-size : cover;
    background-repeat: no-repeat;
}

.creation_4_suivant { 
    grid-column: 40 / 68;
    grid-row: 11;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_5_encart {
    grid-column: 3 / 62;
    grid-row: 2 / 9;
    margin-top: 32px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
    background-size: cover;
    box-shadow: 2px 2px 12px 2px #000000bf;
    border-radius: 10px;
}

.creation_5_texte {  
    grid-column: 11 / 54;
    grid-row: 3;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_5_archetype1 {  
    grid-column: 5 / 33;
    grid-row: 5;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.creation_5_archetype2 {  
    grid-column: 32 / 60;
    grid-row: 5;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.creation_5_suivant { 
    grid-column: 40 / 68;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_6_encart {
    grid-column: 3 / 62;
    grid-row: 2 / 66;
    margin-top: 32px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
    background-size: cover;
    box-shadow: 2px 2px 12px 2px #000000bf;
    border-radius: 10px;
}

.creation_6_texte {  
    grid-column: 11 / 54;
    grid-row: 3;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_6_decompte {  
    grid-column: 11 / 54;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;  
    text-align: center;
    font-size: 15px;
    /* background-color: #44ff0073; */
}

.creation_6_liste {
    grid-column: 4 / 61;
    grid-row: 7 / 63;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/creation_competences.webp);
    background-size: contain;
    box-shadow: 2px 2px 12px 2px #000000bf;
    border-radius: 10px;
    background-repeat: no-repeat;
    margin-bottom: 0px;
}

.creation_6_suivant {
    grid-column: 40 / 68;
    grid-row: 64;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
}

.creation_7_encart {
    grid-column: 3 / 49;
    grid-row: 2 / 12;
    margin-top: 32px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
    background-size: cover;
    box-shadow: 2px 2px 12px 2px #000000bf;
    border-radius: 10px;
}

.creation_7_texte {  
    grid-column: 10 / 44;
    grid-row: 3;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_7_arksonge {  
    grid-column: 7 / 20;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.creation_7_arkentropie {  
    grid-column: 20 / 35;
    grid-row: 6;
    margin-top: 0px;
    margin-left: -3px;
    margin-right: 0px;
}

.creation_7_arkoeur {  
    grid-column: 31 / 48;
    grid-row: 6;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.creation_7_arksonge_data { 
    grid-column: 14;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border: 1px solid #a13d32;
    background: #ffffff8f;
}

.creation_7_arkentropie_data { 
    grid-column: 27;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border: 1px solid #a13d32;
    background: #ffffff8f;
}

.creation_7_arkoeur_data { 
    grid-column: 38;
    grid-row: 7;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border: 1px solid #a13d32;
    background: #ffffff8f;
}

.creation_7_arksonge_titre { 
    grid-column: 7 / 20;
    grid-row: 8;
    height: 35px;
    margin-top: 0px;
    margin-left: 37px;
    margin-right: 0px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/arksonge_titre.png);
    background-size: 110px;
    background-repeat: no-repeat;
}

.creation_7_arkentropie_titre {  
    grid-column: 20 / 38;
    grid-row: 8;
    height: 35px;
    margin-top: 0px;
    margin-left: 19px;
    margin-right: 0px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/arkentropie_titre.png);
    background-size: 144px;
    background-repeat: no-repeat;
}

.creation_7_arkoeur_titre { 
    grid-column: 31 / 55;
    grid-row: 8;
    height: 35px;
    margin-top: 0px;
    margin-left: 48px;
    margin-right: 0px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/arkoeur_titre.png);
    background-size: 110px;
    background-repeat: no-repeat;
}

.creation_7_suivant { 
    grid-column: 37 / 50;
    grid-row: 10;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_8_encart {
    grid-column: 3 / 51;
    grid-row: 2 / 12;
    margin-top: 32px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    font-size: 16px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_popup.png);
    background-size: cover;
    box-shadow: 2px 2px 12px 2px #000000bf;
    border-radius: 10px;
}

.creation_8_texte {  
    grid-column: 11 / 46;
    grid-row: 3;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: center;
    /* background-color: #44ff0073; */
}

.creation_8_final { 
    grid-column: 11 / 46;
    grid-row: 8;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    font-size: 17px;
    text-align: center;
    margin-bottom: 60px;
    /* background-color: #44ff0073; */
}

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

.wrapper_zone_bloc_creation {
    display: grid;
    grid-template-columns: repeat(26, 9px);
    grid-auto-rows: 9.2px;  
    color: var(--black);
    font-size: 11px;
    line-height: 26px;
    text-transform: uppercase;
    letter-spacing: -0.8px;
}

.creation_artisan {
    grid-column: 2 / 19;
    grid-row: 2;
    margin-top: 0px;
    margin-left: -2px;
    margin-right: 0px;
}

.creation_artiste {
    grid-column: 20 / 37;
    grid-row: 2;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.creation_combattant {  
    grid-column: 38 / 56;
    grid-row: 2;
    margin-top: 0px;
    margin-left: 2px;
    margin-right: 0px;
}

.creation_erudit {
    grid-column: 2 / 19;
    grid-row: 20;
    margin-top: 2px;
    margin-left: -2px;
    margin-right: 0px;
}

.creation_explorateur {
    grid-column: 20 / 37;
    grid-row: 20;
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 0px;
}

.creation_magicien {
    grid-column: 38 / 56;
    grid-row: 20;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 0px;
}

.creation_roublard {
    grid-column: 11 / 28;
    grid-row: 38;
    margin-top: 1px;
    margin-left: -3px;
    margin-right: 0px;
}

.creation_stratege {
    grid-column: 30 / 47;
    grid-row: 38;
    margin-top: 1px;
    margin-left: -2px;
    margin-right: 0px;
}

.ark_reset_1,
.ark_reset_2,
.ark_reset_3 {
    grid-column: 71 / 121;
    grid-row: 37 / 89;
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 0px;
    background-size: 50px 50px;
    background-repeat: no-repeat;
}

.ark_reset_1 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_09.png);
}

.ark_reset_2 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_10.png);
}

.ark_reset_3 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_11.png);
}

/* ROLL TEMPLATE */
.sheet-rolltemplate-ark {
  text-align: center;
  --color_titre: #a44e45;
  --color_xp: #03bbce;
  --echec_2: #bc0000e0;
  --echec_3: #bc0000e0;
  --echec_1: #b016a0;
  --reussite_3: #036c03;
  --reussite_2: #035bae;
  --reussite_1: #9e9c02d9;
  --blanc_roll: #fcfcfdf0;
  --echec_critique: #b016a0;
  --reussite_critique: #9e9c02d9;
  --echec: #bc0000e0;
  --reussite: #036c03;
  --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/Arkhanval/images/fond_roll.png);
  --roll_background: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/fond_roll.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);
    /* background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/back_roll.png); */
    background-size: 300px auto;
    width: 300px;
    height: auto;
    margin-left: -35px;
    padding-top: 15px;
}
 
.sheet-rolltemplate-ark .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-ark .sheet-rouge_critique,
.sheet-rolltemplate-ark .sheet-vert,
.sheet-rolltemplate-ark .sheet-gris,
.sheet-rolltemplate-ark .sheet-jaune {
    color: white;
    border-radius: 22px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 5px;
    padding-right: 5px;
    border: 2px solid #353434;
    box-shadow: 1px 1px 6px 3px #636363c4;
    background-size: cover;
}

.sheet-rolltemplate-ark .sheet-rouge_critique {
    background: #bb0505;
    padding-left: 8px;
    padding-right: 9px;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_1.png);
}

.sheet-rolltemplate-ark .sheet-gris {
    background: #919191;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_2.png);
}

.sheet-rolltemplate-ark .sheet-vert {
    background: #036a3a;
    background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_3.png);
}

.sheet-rolltemplate-ark .sheet-jaune {
    color: #646363;
    background: #e3e003;
    letter-spacing: -1.5px;
    white-space: nowrap;
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/result_4.png);
}


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

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

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

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

.sheet-rolltemplate-ark .sheet-rolltemplate-ark-background {
    background: #e6d1bf;
    background-size: cover;
    background-image: var(--roll_background);
    margin-left: 20px;
    margin-right: 22px;
}

.sheet-rolltemplate-ark .sheet-titre {
    display: grid;
    grid-template-columns: 26% 67%;
    background-image: url("https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/fond_titre_roll.png");
    background-size: 263px 70px;
    background-repeat: no-repeat;
    height: 70px;
    margin-left: 17px;
}

.sheet-rolltemplate-ark sheet-span.r_rouge {
  color: red;
}

.sheet-rolltemplate-ark sheet-span.r_orange {
  color: orange;
}



.sheet-rolltemplate-ark .sheet-rolltemplate-ark-titre-roll,
.sheet-rolltemplate-ark .sheet-portrait_roll,
.sheet-rolltemplate-ark .sheet-result_roll,
.sheet-rolltemplate-ark .sheet-rolltemplate-ark-header {
    word-wrap: break-word;
    letter-spacing: -0.7px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: bold;
    width: auto;
    margin-left: 0px;
    margin-top: -1px;
    margin-bottom: -5px;
    color: var(--blanc_roll);
    font-size: 16px;
    font-family: "Faculty Glyphic", sans-serif;
    line-height: 23px;
}

.sheet-rolltemplate-ark .sheet-result_roll {
    font-size: 40px;
    color: #6f79a0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sheet-rolltemplate-ark .sheet-rolltemplate-ark-subheader {
    background-color: transparent;
    color: #000000b3;
    font-size: 13px;
    letter-spacing: 0px;
    padding: 15px;
    padding-top: 15px;
    margin-top: 0px;
    font-family: "Faculty Glyphic", sans-serif;
    width: auto;
    line-height: 50px;
}

.sheet-rolltemplate-ark .sheet-template-ark-result {
  font-size: 36px;
  font-family: "Faculty Glyphic", sans-serif;
  padding: 15px;
}

.sheet-rolltemplate-ark .sheet-template-ark-rappel { 
  padding: 5px;
  padding-bottom: 6px;
  letter-spacing: -0.2px;
  color: var(--blanc_roll);
  width: auto;
  margin-left: -2px;
  background: var(--noir_roll);
  margin-top: -5px;
  font-family: "Faculty Glyphic", sans-serif;
  /* font-family: "EB Garamond", serif; */
  font-size: 18px;
  line-height: 10px;
  padding-top: 10px;
}

.sheet-rolltemplate-ark .sheet-template-ark-rappel {
    background-image: url(https://imgsrv.roll20.net/?src=https%3A//raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/fond_titre_roll.png);
    background-size: cover;
    width: 252px;
    height: 42px;
    line-height: 20px;
}

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

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

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

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

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

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

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

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

.sheet-rolltemplate-ito {
    margin-left: -10px;
  }
  .withoutavatars .sheet-rolltemplate-ito {
    margin-left: -10px;
  }
  
  .sheet-rolltemplate-ito .sheet-container {
      border: none;
      border-radius: 130px;
      width: 260px;
      height: 260px;
      background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/background_xp.png);
      background-size: cover;
      color: #000000b3;
      font-size: 16px;
      /* font-family: "EB Garamond", serif; */
      font-family: "Faculty Glyphic", sans-serif;
      line-height: 23px;
      --rouge: red;
      --vert: #00bd00;
      --noir: black;
  }
  
  /* Header formatting - title and subtitle */
  .sheet-rolltemplate-ito .sheet-header {
      color: #000000b3;
      text-align: center;
      padding-top: 50px;
      padding-bottom: 6px;  
      border-bottom: 2px solid #000000b3;
      margin-left: 63px;
      width: 136px;
  }
  .sheet-rolltemplate-ito .sheet-title {
      font-size: 25px;
      font-weight: bold;	
      margin-bottom: 5px;
      /* letter-spacing: -0.5px; */
  }
  
  .sheet-rolltemplate-ito .sheet-subtitle {
      font-size: 14px;
      font-style: italic;
      margin-bottom: 5px;
      letter-spacing: -0.5px;
  }
  
  /* Allprops part */
  .sheet-rolltemplate-ito .sheet-content {
      width: 184px;
      margin-left: 38px;
      display: grid;
      grid-template-columns: auto auto;
      line-height: 1.4em;
      margin-top: 10px;
  }
  .sheet-rolltemplate-ito .sheet-content > div {
    padding: 5px;
  }
  
  /* Left column */
  .sheet-rolltemplate-ito .sheet-content .sheet-key {
    font-weight: bold;
    padding-right: 10px;
    text-align: right;
  }
  
  /* Empty rule, use this if you want to change the right column 
  .sheet-rolltemplate-ito .sheet-value {
  }
  */
  
  /* Make even-numbered rows grey */
  .sheet-rolltemplate-ito .sheet-content :nth-child(4n+3),
  .sheet-rolltemplate-ito .sheet-content :nth-child(4n) {
    background:#EEE;
  }
  
  /* Description field */
  .sheet-rolltemplate-ito .sheet-desc,
  .sheet-rolltemplate-ito .sheet-result,
  .sheet-rolltemplate-ito .sheet-feedback-reussite,
  .sheet-rolltemplate-ito .sheet-feedback-reussite-ark,
  .sheet-rolltemplate-ito .sheet-feedback-reussite-a {
    grid-column: span 2;
    padding: 5px;
    text-align: center;
  }
  
  .sheet-rolltemplate-ito .sheet-result_1,
  .sheet-rolltemplate-ito .sheet-result_2,
  .sheet-rolltemplate-ito .sheet-result_3,
  .sheet-rolltemplate-ito .sheet-result_4,
  .sheet-rolltemplate-ito .sheet-result_5,
  .sheet-rolltemplate-ito .sheet-result_6,
  .sheet-rolltemplate-ito .sheet-result_7,
  .sheet-rolltemplate-ito .sheet-result_8,
  .sheet-rolltemplate-ito .sheet-result_9,
  .sheet-rolltemplate-ito .sheet-result_10,
  .sheet-rolltemplate-ito .sheet-result_11,
  .sheet-rolltemplate-ito .sheet-result_12 {
      /* margin-top: 10px; */
      font-size: 60px;
      font-weight: bold;
      width: 70px;
      height: 70px;
      background-repeat: no-repeat;
      margin-left: 60px;
      background-size: 70px 70px;
  }

  .sheet-rolltemplate-ito .sheet-result_1 {
    background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_01.png);
}

.sheet-rolltemplate-ito .sheet-result_2 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_02.png);
}

.sheet-rolltemplate-ito .sheet-result_3 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_03.png);
}

.sheet-rolltemplate-ito .sheet-result_4 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_04.png);
}

.sheet-rolltemplate-ito .sheet-result_5 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_05.png);
}

.sheet-rolltemplate-ito .sheet-result_6 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_06.png);
}

.sheet-rolltemplate-ito .sheet-result_7 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_07.png);
}

.sheet-rolltemplate-ito .sheet-result_8 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_08.png);
}

.sheet-rolltemplate-ito .sheet-result_9 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_09.png);
}

.sheet-rolltemplate-ito .sheet-result_10 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_10.png);
}

.sheet-rolltemplate-ito .sheet-result_11 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_11.png);
}

.sheet-rolltemplate-ito .sheet-result_12 {
  background-image: url(https://raw.githubusercontent.com/ctotone/JdR/refs/heads/main/Arkhanval/images/symbole_12.png);
  width: 100px;
  height: 100px;
  margin-left: 45px;
  background-size: 100px 100px;
}
  
  .sheet-rolltemplate-ito .sheet-feedback-reussite,
  .sheet-rolltemplate-ito .sheet-feedback-reussite-ark,
  .sheet-rolltemplate-ito .sheet-feedback-reussite-a
   {
      /* margin-top: 30px; */
      font-size: 22px;
      font-weight: bold;
      letter-spacing: -1.5px;
  }
  
  .sheet-rolltemplate-ito .sheet-feedback-reussite {
      color: #000000b3;
  }
  
  .sheet-rolltemplate-ito .sheet-feedback-reussite-ark {
      color: #a13d32;
  }

  
  .sheet-rolltemplate-ito .sheet-feedback-reussite-a {
    color: #707aa1;
}