{% extends 'role/member/player/sheet/prophecy/player_form_figure_edit_template.html.twig' %}

{% block stylesheets %}
	{{ parent() }}  
	
 



        /*  formulaire */
       
        #member_template_layout
        {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;  
            align-items: center;
            /*background: linear-gradient(to bottom, #D2B48C, #D2B48C);*/
            background-color: #E3D2BF;
            min-height: unset; 
            margin: 20px;
            border: solid;
        }

		form
		{
            border-radius: 20px;
            padding: 40px 30px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 20px; //espace entre chaque section
		}


		/*  est ce utile???? 
        form 
        {
            background: linear-gradient(to bottom, #94746B, #A78D86);
            border-radius: 20px;
            padding: 40px 30px;
            width: 100%;
            box-shadow: 8px 8px 12px rgba(105, 94, 75, 1);
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 20px;
            border: 1px solid #EBA307;  
        }
        
        */
            
        /* Champs de saisie (email, mot de passe) */
        .input-wrapper 
        {
            border-bottom: 1px solid #743B07;   
            padding-bottom: 5px;
        }
            
        input.form-control 
        {
            background: transparent;
            border: none;
            outline: none;
            color: white;
            font-size: 14px;
            width: 100%;
            padding: 10px 0;
        }
            
        input::placeholder 
        {
            color: white;
            opacity: 0.7;
        }
            
        /* Jeton CSRF — non stylé */
        .no-style 
        {
            all: unset;
        }               
        */
        
        /*  fin de formulaire */
        
        
        
        
	
	.hidden-fields {
    display: none;
}

    h1
    {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    
    
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
      font-weight: 900;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      background-color: #1765DA;
      color: #fff;
      text-align: left;
      border-radius: 6px;
      padding: 8px 12px;
      position: absolute;
      z-index: 5;
      bottom: 125%; /* Position au-dessus de l’élément */
      left: 250%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s ease;
      min-width: 250px;
      max-width: 500px; /* Empêche la boîte d’être trop large */
      width: max-content; /* S’ajuste au contenu */
      white-space: normal; /* Permet les retours à la ligne */
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
      font-size: 14px;
      line-height: 1.4;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
      opacity: 1;
    }
    
    table th
    {
    	color: red;
    }
    
    #section-campaign
    {
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    }

    #section-campaign p
    {
		flex: 1;
    }
    
    
#section-status {
  margin-top: 1em;
}

#section-status h3 {
  margin-top: 1.5em;
  font-size: 1.2em;
  border-bottom: 2px solid #ccc;
  padding-bottom: 4px;
}

#section-status ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#section-status li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px; /* espace entre les éléments */
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: #fafafa;
  transition: background 0.2s ease;
}

#section-status li:hover {
  background: #f0f0f0;
}

#section-status label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 100%;
}

#section-status input[type="radio"] {
  transform: scale(1.2);
}

#section-status strong {
  font-weight: 600;
}

#section-status .level {
  color: #555;
  font-size: 0.9em;
}

#section-status .description {
  color: #666;
  font-style: italic;
  font-size: 0.9em;
}

#section-status .description,
#section-status .level,
#section-status div {
  margin-left: 5px;
} 




/* Conteneur */
#section-status {
  margin-top: 1em;
}

/* En-têtes de castes (clic accordéon) */
#section-status h3 {
  cursor: pointer;
  background: #eee;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 8px 0;
  user-select: none;
  position: relative;
  transition: background 0.3s ease;
}

/* Flèche indicatrice à droite */
#section-status h3::after {
  content: "▸";
  position: absolute;
  right: 14px;
  font-size: 0.9em;
  transition: transform 0.3s ease;
}

/* Quand la section est ouverte */
#section-status h3.open {
  background: #ddd;
}

#section-status h3.open::after {
  transform: rotate(90deg);
}

/* Contenu replié par défaut */
#section-status h3 + ul {
  display: none;
  margin: 0 0 10px 0;
  padding: 0;
}

/* Quand la section est ouverte */
#section-status h3.open + ul {
  display: block;
}

 
 
 
 
 
/* Toggle invisible */
.omen-toggle {
    display: none;
}

.omen-label {
    display: block;
    background: #eee;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    transition: background 0.3s ease;
}

.omen-label::after {
    content: "▸";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.omen-details {
    display: none;
    background: #f9f9f9;
    border-left: 3px solid #bbb;
    margin: -2px 0 8px 0;
    padding: 10px 14px;
    border-radius: 0 0 6px 6px;
}

/* Accordéon ouvert */
.omen-toggle:checked + .omen-label::after {
    transform: translateY(-50%) rotate(90deg);
}
.omen-toggle:checked + .omen-label {
    background: #ddd;
}
.omen-toggle:checked + .omen-label + .real-radio-omen + .omen-details {
    display: block;
}

/* Radio invisible */
.real-radio-omen input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}



/* Toggle invisibles */
.age-toggle {
    display: none;
}

/* Label accordéon */
.age-label {
    display: block;
    background: #eee;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    transition: background 0.3s ease;
}

/* Petite flèche */
.age-label::after {
    content: "▸";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* Détails cachés */
.age-details {
    display: none;
    background: #f9f9f9;
    border-left: 3px solid #bbb;
    margin: -2px 0 8px 0;
    padding: 10px 14px;
    border-radius: 0 0 6px 6px;
}

/* Accordéon ouvert */
.age-toggle:checked + .age-label::after {
    transform: translateY(-50%) rotate(90deg);
}
.age-toggle:checked + .age-label {
    background: #ddd;
}
.age-toggle:checked + .age-label + .real-radio-age + .age-details {
    display: block;
}

/* Radio réel invisible */
.real-radio-age input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}









/* Toggle = seulement l'accordéon */
.caste-toggle {
    display: none;
}

.caste-label {
    display: block;
    background: #eee;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    transition: background 0.3s ease;
}

.caste-label::after {
    content: "▸";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.caste-details {
    display: none;
    background: #f9f9f9;
    border-left: 3px solid #bbb;
    margin: -2px 0 8px 0;
    padding: 10px 14px;
    border-radius: 0 0 6px 6px;
}

/* Accordéon ouvert */
.caste-toggle:checked + .caste-label::after {
    transform: translateY(-50%) rotate(90deg);
}
.caste-toggle:checked + .caste-label {
    background: #ddd;
}
.caste-toggle:checked + .caste-label + .real-radio + .caste-details {
    display: block;
}

/* Radio invisible mais actif */
.real-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}




 .nation-radio {
    display: none;
}

.nation-label {
    display: block;
    background: #eee;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    transition: background 0.3s ease;
}

.nation-label::after {
    content: "▸";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.nation-details {
    display: none;
    background: #f9f9f9;
    border-left: 3px solid #bbb;
    margin: -2px 0 8px 0;
    padding: 10px 14px;
    border-radius: 0 0 6px 6px;
}

/* Highlight + ouverture */
.nation-radio:checked + .nation-label {
    background: #ddd;
}

.nation-radio:checked + .nation-label::after {
    transform: translateY(-50%) rotate(90deg);
}

.nation-radio:checked + .nation-label + .nation-details {
    display: block;
}


.spell-group {
  margin-bottom: 0.8em;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;

}



.spell-toggle {
  display: none;
}

.spell-label {
  display: block;
  background: #e9e9e9;
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  user-select: none;
  transition: background 0.3s ease;
}



.spell-label::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: #555;
  transition: transform 0.3s ease;
}

.spell-label:hover {
  background: #dcdcdc;
}



.spells-details {
  display: none;
  padding: 10px 14px;
  background: #f9f9f9;
}

.spell-toggle:checked + .spell-label::after {
  transform: translateY(-50%) rotate(90deg);
}

.spell-toggle:checked + .spell-label + .spells-details {
  display: block;
}

 
 
 
 
 
/* Conteneur principal */
#section-favours {
  margin-top: 1em;
}

/* Bloc contenant les faveurs (catégories) */
#section-favours #prophecy_edit_figure_sheet_form_favours {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

/* On cache les cases principales (catégories) */
#section-favours #prophecy_edit_figure_sheet_form_favours input[type="checkbox"] {
  display: none;
}

/* Label = bouton d’option stylisé */
#section-favours #prophecy_edit_figure_sheet_form_favours label {
  display: block;
  background: #eee;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 6px 0;
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
}

/* Flèche indicatrice à droite */
#section-favours #prophecy_edit_figure_sheet_form_favours label::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: #666;
  transition: transform 0.3s ease;
}

/* Hover */
#section-favours #prophecy_edit_figure_sheet_form_favours label:hover {
  background: #ddd;
}

/* Quand le bouton est sélectionné */
#section-favours #prophecy_edit_figure_sheet_form_favours input[type="checkbox"]:checked + label {
  background: #ddd;
  font-weight: 600;
}

/* Quand sélectionné, la flèche tourne */
#section-favours #prophecy_edit_figure_sheet_form_favours input[type="checkbox"]:checked + label::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Contenu caché/visible simulant l’accordéon */
#section-favours #prophecy_edit_figure_sheet_form_favours input[type="checkbox"] + label + .favours-details {
  display: none;
  background: #f9f9f9;
  border-left: 3px solid #bbb;
  margin: -2px 0 8px 0;
  padding: 8px 14px;
  border-radius: 0 0 6px 6px;
}

/* Quand le label correspondant est sélectionné → afficher le contenu */
#section-favours #prophecy_edit_figure_sheet_form_favours input[type="checkbox"]:checked + label + .favours-details {
  display: block;
}

/* ================================
   STRUCTURE INTERNE PAR CATÉGORIE
   ================================ */

.favour-group {
  margin-bottom: 0.8em;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.favour-toggle {
  display: none;
}

.favour-label {
  display: block;
  background: #e9e9e9;
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  user-select: none;
  transition: background 0.3s ease;
}

/* Flèche sur le label principal */
.favour-label::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: #555;
  transition: transform 0.3s ease;
}

/* Survol */
.favour-label:hover {
  background: #dcdcdc;
}

/* Bloc détaillé caché/visible */
.favours-details {
  display: none;
  padding: 10px 14px;
  background: #f9f9f9;
}

/* Rotation flèche quand ouvert */
.favour-toggle:checked + .favour-label::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Afficher le contenu quand coché */
.favour-toggle:checked + .favour-label + .favours-details {
  display: block;
}

/* ================================
   STYLISATION DU CONTENU INTERNE
   ================================ */

.favours-details ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.favours-details li {
  margin-bottom: 0.6em;
  background: #fff;
  /*border: 1px solid #ddd;
  border-radius: 4px;*/
  padding: 8px 10px;
  background: #f9f9f9;
}

.favours-details strong {
  display: block;
  color: #333;
}

.favours-details em {
  color: #666;
  font-size: 0.9em;
}

.favours-details .description {
  font-size: 0.9em;
  color: #444;
  margin-top: 4px;
}

.favours-details input[type="checkbox"] {
  margin-right: 6px;
  transform: translateY(1px);
}







/* Accordéon */
.caste-toggle {
    display: none;
}

.caste-label {
    display: block;
    background: #eee;
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0;
    cursor: pointer;
    font-weight: 600;
    position: relative;
    transition: background 0.3s ease;
}

.caste-label::after {
    content: "▸";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.caste-details {
    display: none;
    background: #f9f9f9;
    border-left: 3px solid #bbb;
    margin: -2px 0 8px 0;
    padding: 10px 14px;
    border-radius: 0 0 6px 6px;
}

/* Accordéon ouvert */
.caste-toggle:checked + .caste-label::after {
    transform: translateY(-50%) rotate(90deg);
}
.caste-toggle:checked + .caste-label {
    background: #ddd;
}
.caste-toggle:checked + .caste-label + .caste-details {
    display: block;
}

/* Radio invisible */
.real-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}











/* ================================
   SECTION DÉSAVANTAGES — ACCORDÉON
   ================================ */

/* Conteneur principal */
#section-disadvantages {
  margin-top: 1em;
}

/* Bloc principal du formulaire */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

/* On cache les checkboxes principales */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages input[type="checkbox"] {
  display: none;
}

/* Label = bouton d’accordéon */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages label {
  display: block;
  background: #eee;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 6px 0;
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
}

/* Flèche indicatrice à droite */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages label::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: #666;
  transition: transform 0.3s ease;
}

/* Hover */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages label:hover {
  background: #ddd;
}

/* Quand le bouton est sélectionné */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages input[type="checkbox"]:checked + label {
  background: #ddd;
  font-weight: 600;
}

/* Quand sélectionné, la flèche tourne */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages input[type="checkbox"]:checked + label::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Contenu caché/visible simulant l’accordéon */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages input[type="checkbox"] + label + .disadvantages-details {
  display: none;
  background: #f9f9f9;
  border-left: 3px solid #bbb;
  margin: -2px 0 8px 0;
  padding: 8px 14px;
  border-radius: 0 0 6px 6px;
}

/* Quand le label correspondant est sélectionné → afficher le contenu */
#section-disadvantages #prophecy_edit_figure_sheet_form_disadvantages input[type="checkbox"]:checked + label + .disadvantages-details {
  display: block;
}

/* ================================
   STRUCTURE INTERNE PAR CATÉGORIE
   ================================ */

.disadvantage-group {
  margin-bottom: 0.8em;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.disadvantage-toggle {
  display: none;
}

.disadvantage-label {
  display: block;
  background: #e9e9e9;
  padding: 10px 14px;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  user-select: none;
  transition: background 0.3s ease;
}

/* Flèche sur le label principal */
.disadvantage-label::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: #555;
  transition: transform 0.3s ease;
}

/* Survol */
.disadvantage-label:hover {
  background: #dcdcdc;
}

/* Bloc détaillé caché/visible */
.disadvantages-details {
  display: none;
  padding: 10px 14px;
  background: #f9f9f9;
}

/* Rotation flèche quand ouvert */
.disadvantage-toggle:checked + .disadvantage-label::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Afficher le contenu quand coché */
.disadvantage-toggle:checked + .disadvantage-label + .disadvantages-details {
  display: block;
}

/* ================================
   STYLISATION DU CONTENU INTERNE
   ================================ */

.disadvantages-details ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.disadvantages-details li {
  margin-bottom: 0.6em;
  background: #fff;
  border-radius: 4px;
  padding: 8px 10px;
}

.disadvantages-details strong {
  display: block;
  color: #333;
}

.disadvantages-details em {
  color: #666;
  font-size: 0.9em;
}

.disadvantages-details .description {
  font-size: 0.9em;
  color: #444;
  margin-top: 4px;
}

.disadvantages-details input[type="checkbox"] {
  margin-right: 6px;
  transform: translateY(1px);
}
 
 
 
 
 
 /* ca marche jusqu'ici tester plus bas */ 
 
/* ================================
   SECTION ARMES — ACCORDÉON CSS
   ================================ */

/* Conteneur principal */
#section-weapons {
  margin-top: 1em;
}

#section-weapons legend {
  font-weight: bold;
  font-size: 1.1em;
  color: #222;
  margin-bottom: 0.6em;
}

#weapon-collection-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 8px;
}

/* -------------------------------
   GROUPE D'ARMES (catégorie)
   ------------------------------- */
.weapon-group {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

/* Checkbox toggle caché */
.weapon-toggle {
  display: none;
}

/* Label = en-tête repliable */
.weapon-label {
  display: block;
  background: #e9e9e9;
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  color: #333;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background 0.3s ease;
}

/* Flèche à droite */
.weapon-label::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: #555;
  transition: transform 0.3s ease;
}

/* Hover effet */
.weapon-label:hover {
  background: #dcdcdc;
}

/* Flèche rotation quand ouvert */
.weapon-toggle:checked + .weapon-label::after {
  transform: translateY(-50%) rotate(90deg);
}

/* -------------------------------
   CONTENU DÉPLIABLE (table)
   ------------------------------- */
.weapons-details {
  display: none;
  background: #f9f9f9;
  padding: 10px 14px;
  border-top: 1px solid #ccc;
}

/* Quand le toggle est activé → afficher le contenu */
.weapon-toggle:checked + .weapon-label + .weapons-details {
  display: block;
}

/* -------------------------------
   TABLE STYLING
   ------------------------------- */
.weapons-details table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.95em;
}

.weapons-details th,
.weapons-details td {
  padding: 6px 8px;
  border: 1px solid #ddd;
  vertical-align: top;
}

.weapons-details thead {
  background: #eee;
  font-weight: 600;
}

.weapons-details tbody tr:nth-child(even) {
  background: #fafafa;
}

.weapons-details td em {
  color: #777;
}

/* Champs du formulaire */
.weapons-details select,
.weapons-details input[type="number"],
.weapons-details input[type="text"] {
  width: 100%;
  padding: 5px;
  font-size: 0.9em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.3s ease;
}

.weapons-details select:focus,
.weapons-details input:focus {
  border-color: #999;
  outline: none;
}

/* -------------------------------
   SECTION LOCK
   ------------------------------- */
#weapon-collection-wrapper .lock {
  display: block;
  margin-top: 10px;
  text-align: right;
  font-size: 0.85em;
  color: #777;
}
 
 
 
 
 
 
 
 
/* ================================
   SECTION ARMURES — ACCORDÉON CSS
   ================================ */

/* Conteneur principal */
#section-armors {
  margin-top: 1em;
}

#section-armors legend {
  font-weight: bold;
  font-size: 1.1em;
  color: #222;
  margin-bottom: 0.6em;
}

#armor-collection-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 8px;
}

/* -------------------------------
   GROUPE D’ARMURES (catégorie)
   ------------------------------- */
.armor-group {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

/* Toggle caché */
.armor-toggle {
  display: none;
}

/* Label = en-tête repliable */
.armor-label {
  display: block;
  background: #e9e9e9;
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  color: #333;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background 0.3s ease;
}

/* Flèche à droite */
.armor-label::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: #555;
  transition: transform 0.3s ease;
}

/* Hover effet */
.armor-label:hover {
  background: #dcdcdc;
}

/* Flèche rotation quand ouvert */
.armor-toggle:checked + .armor-label::after {
  transform: translateY(-50%) rotate(90deg);
}

/* -------------------------------
   CONTENU DÉPLIABLE
   ------------------------------- */
.armors-details {
  display: none;
  background: #f9f9f9;
  padding: 10px 14px;
  border-top: 1px solid #ccc;
}

/* Quand le toggle est activé → afficher le contenu */
.armor-toggle:checked + .armor-label + .armors-details {
  display: block;
}

/* -------------------------------
   TABLE STYLING
   ------------------------------- */
.armors-details table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.95em;
}

.armors-details th,
.armors-details td {
  padding: 6px 8px;
  border: 1px solid #ddd;
  vertical-align: top;
}

.armors-details thead {
  background: #eee;
  font-weight: 600;
}

.armors-details tbody tr:nth-child(even) {
  background: #fafafa;
}

.armors-details td em {
  color: #777;
}

/* Champs du formulaire */
.armors-details select,
.armors-details input[type="number"],
.armors-details input[type="text"] {
  width: 100%;
  padding: 5px;
  font-size: 0.9em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.3s ease;
}

.armors-details select:focus,
.armors-details input:focus {
  border-color: #999;
  outline: none;
}

/* -------------------------------
   SECTION LOCK
   ------------------------------- */
#armor-collection-wrapper .lock {
  display: block;
  margin-top: 10px;
  text-align: right;
  font-size: 0.85em;
  color: #777;
} 
 
 
 
 



/* ================================
   SECTION BOUCLIERS — ACCORDÉON CSS
   ================================ */

/* Conteneur principal */
#section-shields {
  margin-top: 1em;
}

#section-shields legend {
  font-weight: bold;
  font-size: 1.1em;
  color: #222;
  margin-bottom: 0.6em;
}

#shield-collection-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 8px;
}

/* -------------------------------
   GROUPE DE BOUCLIERS (catégorie)
   ------------------------------- */
.shield-group {
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
}

/* Toggle caché */
.shield-toggle {
  display: none;
}

/* Label = en-tête repliable */
.shield-label {
  display: block;
  background: #e9e9e9;
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  color: #333;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: background 0.3s ease;
}

/* Flèche à droite */
.shield-label::after {
  content: "▸";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9em;
  color: #555;
  transition: transform 0.3s ease;
}

/* Hover effet */
.shield-label:hover {
  background: #dcdcdc;
}

/* Flèche rotation quand ouvert */
.shield-toggle:checked + .shield-label::after {
  transform: translateY(-50%) rotate(90deg);
}

/* -------------------------------
   CONTENU DÉPLIABLE
   ------------------------------- */
.shields-details {
  display: none;
  background: #f9f9f9;
  padding: 10px 14px;
  border-top: 1px solid #ccc;
}

/* Quand le toggle est activé → afficher le contenu */
.shield-toggle:checked + .shield-label + .shields-details {
  display: block;
}

/* -------------------------------
   TABLE STYLING
   ------------------------------- */
.shields-details table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.95em;
}

.shields-details th,
.shields-details td {
  padding: 6px 8px;
  border: 1px solid #ddd;
  vertical-align: top;
}

.shields-details thead {
  background: #eee;
  font-weight: 600;
}

.shields-details tbody tr:nth-child(even) {
  background: #fafafa;
}

.shields-details td em {
  color: #777;
}

/* Champs du formulaire */
.shields-details select,
.shields-details input[type="number"],
.shields-details input[type="text"] {
  width: 100%;
  padding: 5px;
  font-size: 0.9em;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.3s ease;
}

.shields-details select:focus,
.shields-details input:focus {
  border-color: #999;
  outline: none;
}

/* -------------------------------
   SECTION LOCK
   ------------------------------- */
#shield-collection-wrapper .lock {
  display: block;
  margin-top: 10px;
  text-align: right;
  font-size: 0.85em;
  color: #777;
}





/* ================================
   SECTION OBJETS DIVERS — ACCORDÉON CSS
   ================================ */

#section-items {
    margin-top: 1em;
}

#section-items legend {
    font-weight: bold;
    font-size: 1.1em;
    color: #222;
    margin-bottom: 0.6em;
}

#item-collection-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* -------------------------------
   GROUPE D’OBJETS (catégorie)
   ------------------------------- */
.item-group {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.item-toggle {
    display: none;
}

.item-label {
    display: block;
    background: #e9e9e9;
    padding: 10px 14px;
    font-weight: 600;
    border-bottom: 1px solid #ccc;
    color: #333;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: background 0.3s ease;
}

.item-label::after {
    content: "▸";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9em;
    color: #555;
    transition: transform 0.3s ease;
}

.item-label:hover {
    background: #dcdcdc;
}

.item-toggle:checked + .item-label::after {
    transform: translateY(-50%) rotate(90deg);
}

.items-details {
    display: none;
    background: #f9f9f9;
    padding: 10px 14px;
    border-top: 1px solid #ccc;
}

.item-toggle:checked + .item-label + .items-details {
    display: block;
}

.items-details table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 0.95em;
}

.items-details th,
.items-details td {
    padding: 6px 8px;
    border: 1px solid #ddd;
    vertical-align: top;
}

.items-details thead {
    background: #eee;
    font-weight: 600;
}

.items-details tbody tr:nth-child(even) {
    background: #fafafa;
}

.items-details select,
.items-details input[type="number"],
.items-details input[type="text"] {
    width: 100%;
    padding: 5px;
    font-size: 0.9em;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

.items-details select:focus,
.items-details input:focus {
    border-color: #999;
    outline: none;
}

#item-collection-wrapper .lock {
    display: block;
    margin-top: 10px;
    text-align: right;
    font-size: 0.85em;
    color: #777;
}


#startXP, #startXPSpent
{
	visibility: hidden;
}
 
 
  
{% endblock %}


{% block breadcrumbs %}
        {{ parent() }}
        <a href=""> > </a>
        <a href="{{ path('player_find_campaigns', {'userid': app.user.id}) }}"> creation de personnage </a>      
{% endblock %}
    
{% block member_navigation %}
    {{ parent() }} 
{% endblock %}

    
{% block title_page %}
{{ parent() }}
    
{% endblock %}    
    
{% block member_template_layout %}                               
	
	{# <a  href="{{ path('player_figure_delete', {'userid': app.user.id,'campaignid': campaign.id, 'figureid': figure.id, 'figureSheet': sheet.id }) }}"><button class="btn-del">supprimer</button></a> #}
                            
	{% set startXP = figureSheet.xperience  %}                                          
            <p id="startXP" >{{ startXP }}</p>
            <p id="startXPSpent">0</p>
	{{ form_start(form) }}

{# ==================== FORM DISPLAYED BY SECTIONS ===================== 
	SECTIONS DISPLAYED :		
	- section-description
	- section-poster
	- section-description
	- section-background
	- section-omen
	- section-age	
	- section-caste
	- section-status (utile???)
	- section-bans
	- section-caracteristics
	- section-majorAttributes
	- section-minorAttributes
	- section nation
	- section-disadvantages
	- section-advantages
	- section-reputation
	- section-skills
	- section-favours
	- section-disciplines
	- section-spheres
	- section-spells
	- section-currencies
	- section-weapons
	- section-armors
	- section-shields
	
   ==================================================================== #}
	   
               
        <fieldset id="section-description">
            <legend class="tooltip"><a href="https://www.assurland.com/assurance-auto/lp-sea/?utm_medium=pub&utm_source=Mozilla&utm_campaign=auto_conversion_native_CPA_generique" target="_blank" >CAMPAGNE</a>  <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i></legend>
 			    <div id="section-campaign">
 				   <p>{{ campaign.name }} pour {{ campaign.game.name }}</p><p>campagne dirigée par {{ campaign.owner }}</p>
 				</div>			
 		</fieldset>

        
        <fieldset id="section-poster">
            <legend class="tooltip"><a href="https://www.assurland.com/assurance-auto/lp-sea/?utm_medium=pub&utm_source=Mozilla&utm_campaign=auto_conversion_native_CPA_generique" target="_blank" >PORTRAIT</a>  <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i></legend>
	 			<div>
	 			   {{ form_row(form.poster) }}{% if figureSheet.poster is not null %}<img alt="poster" src="{{ asset('uploads/figures/' ~ figureSheet.poster) }}" style="width: 100%; height: 300px; object-fit: contain;" >{% else %}<img alt="poster" src="{{ asset('uploads/figures/no-poster.jpg') }}" style="width: 100%; height: 300px; object-fit: contain;" > {% endif %}
	 			</div>
 		</fieldset>
 
        <fieldset id="section-description">
        {# <legend>DESCRIPTION PHYSIQUE <i title="ceci est la description de la section" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i></legend> #}
            <legend class="tooltip"><a href="https://www.assurland.com/assurance-auto/lp-sea/?utm_medium=pub&utm_source=Mozilla&utm_campaign=auto_conversion_native_CPA_generique" target="_blank" >DESCRIPTION PHYSIQUE</a>  <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i>
                <span class="tooltiptext">
                    <p>Définissez quelques traits physiques qui décrivent votre personnage.</p> <p>Vous pouvez revenir sur les différents champs à tout moment.</p>
                </span>
            </legend>                    
                {{ form_row(form.name) }}
                {{ form_row(form.nickname) }}
                {{ form_row(form.weight) }}
                {{ form_row(form.size) }}
                {{ form_row(form.hairs) }}
                {{ form_row(form.eyes) }}    
        </fieldset>
                
                
        <fieldset id="section-background">
        {# <legend>HISTORIQUE <i  title="ceci est la description de la section" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i></legend> #}
            <legend class="tooltip">HISTORIQUE</a>  <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i>
                <span class="tooltiptext">
                    Rédigez un historique du vécu de votre personnage, en accord avec les critères du maître du jeu et ou la description de la campagne.
                </span>
        </legend>
            {{ form_row(form.background) }}
        </fieldset>                
                
        <fieldset id="section-xperience">
        	<legend class="tooltip">
		        <a href="" target="_blank">        
        	EXPERIENCE
		        </a>
		        <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i>   
        	</legend>
        		<div>{{ form_row(form.xperience, {'attr': {'class': 'startXPRemaining'}}) }}	</div>
        </fieldset>       
               
		<fieldset id="section-omen">
		    <legend class="tooltip">
		        <a href="{{ path('player_campaign_view_rules', {
		            'userid': app.user.id,
		            'campaignid': campaign.id
		        }) }}" target="_blank">
		            AUGURE DE NAISSANCE
		        </a>
		
		        <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i>
		
		        <span class="tooltiptext">
		            À la façon des signes du zodiaque, tous les personnages de Prophecy…
		        </span>
		    </legend>
		
		    <div class="omen-group">
		
		        {% for key, choice in form.omen.vars.choices %}
		            {% set omen = choice.data %}
		            {% set radio = form.omen[key] %}
		            {% set isChecked = radio.vars.checked %}
		
		            <div class="omen-group-item">
		
		                <!-- Toggle accordéon -->
		                <input type="checkbox"
		                       id="toggle-omen-{{ loop.index }}"
		                       class="omen-toggle"
		                       {% if isChecked %}checked{% endif %}>
		
		                <!-- Label accordéon -->
		                <label for="toggle-omen-{{ loop.index }}"
		                       class="omen-label">
		                    {{ omen.name }}
		                </label>
		
		                <!-- Radio réel mais invisible -->
		                <div class="real-radio-omen">
		                    {{ form_widget(radio) }}
		                </div>
		
		                <!-- Détails accordéon -->
		                <div class="omen-details">
		
		                    {% if omen.description %}
		                        <div class="description">{{ omen.description|raw }}</div>
		                    {% endif %}
		
		                    {% if omen.personnality %}
		                        <div class="omen-personnality"><strong>Personnalité :</strong> {{ omen.personnality }}</div>
		                    {% endif %}
		
		                    {% if omen.motivation %}
		                        <div class="omen-motivation"><strong>Motivation :</strong> {{ omen.motivation }}</div>
		                    {% endif %}
		
		                    {% if omen.quality %}
		                        <div class="omen-quality"><strong>Qualité :</strong> {{ omen.quality }}</div>
		                    {% endif %}
		
		                    {% if omen.fault %}
		                        <div class="omen-fault"><strong>Défaut :</strong> {{ omen.fault }}</div>
		                    {% endif %}
		
		                </div>
		
		            </div>
		
		        {% endfor %}
		    </div>
		</fieldset>

		<fieldset id="section-age">
		    <legend class="tooltip">
		        <a href="{{ path('player_campaign_view_rules', {
		            'userid': app.user.id,
		            'campaignid': campaign.id
		        }) }}" target="_blank">AGE</a>
		
		        <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i>
		
		        <span class="tooltiptext">
		            L'âge joue un rôle majeur dans le processus de création d'un personnage...
		        </span>
		    </legend>
		
		    <div class="age-group">
		
		        {% for key, choice in form.age.vars.choices %}
		            {% set age = choice.data %}
		            {% set radio = form.age[key] %}
		            {% set isChecked = radio.vars.checked %}
		
		            <div class="age-group-item">
		
		                <!-- Toggle accordéon -->
		                <input type="checkbox"
		                       id="toggle-age-{{ loop.index }}"
		                       class="age-toggle"
		                       {% if isChecked %}checked{% endif %}>
		
		                <!-- Label accordéon -->
		                <label for="toggle-age-{{ loop.index }}" class="age-label">
		                    {{ age.name }}
		                </label>
		
		                <!-- Radio réel mais invisible -->
		                <div class="real-radio-age">
		                    {{ form_widget(radio) }}
		                </div>
		
		                <!-- Détails accordéon -->
		                <div class="age-details">
		
		                    {% if age.description %}
		                        <div class="description">{{ age.description|raw }}</div>
		                    {% endif %}
		
		                    {% if age.minimumYears %}
		                        <div class="age-minimumYears">
		                            <strong>Age minimal :</strong> {{ age.minimumYears }}
		                        </div>
		                    {% endif %}
		
		                    {% if age.maximumYears %}
		                        <div class="age-maximumYears">
		                            <strong>Age maximal :</strong> {{ age.maximumYears }}
		                        </div>
		                    {% endif %}
		
		                </div>
		
		            </div>
		        {% endfor %}
		    </div>
		</fieldset>




		<fieldset id="section-caste">
		    <legend class="tooltip">
		        <a href="{{ path('player_campaign_view_rules', {
		            'userid': app.user.id,
		            'campaignid': campaign.id
		        }) }}" target="_blank">
		            CASTE
		        </a>
		        <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i>
		        <span class="tooltiptext">Le système propose huit castes très différentes…</span>
		    </legend>
		
		    <div class="caste-group">
		        {% for choice in form.caste.vars.choices %}
		            {% set caste = choice.data %}
		            {% set radio = form.caste[choice.value] %}
		            {% set isChecked = radio.vars.checked %}
		
		            <div class="caste-group-item">
		
		                <!-- Accordéon toggle -->
		                <input type="checkbox"
		                       id="toggle-caste-{{ loop.index }}"
		                       class="caste-toggle"
		                       {% if isChecked %}checked{% endif %}>
		
		                <!-- Label qui ouvre l'accordéon -->
		                <label for="toggle-caste-{{ loop.index }}" class="caste-label">
		                    {{ caste.name }}
		                </label>
		
		                <!-- Radio invisible mais fonctionnel -->
		                <div class="real-radio">
		                    {{ form_widget(radio) }}
		                </div>
		
		                <div class="caste-details">
		                    {% if caste.description %}
		                        <div class="description">{{ caste.description|raw }}</div>
		                    {% endif %}
		
		                    {% if caste.bans is defined and caste.bans|length > 0 %}
		                        <div class="caste-bans">
		                            <strong>Interdits de caste :</strong><br>
		                            {{ caste.bans|map(b => b.name)|join(', ') }}
		                        </div>
		                    {% endif %}
		                </div>
		
		            </div>
		        {% endfor %}
		    </div>
		</fieldset>


        <fieldset id="section-status">
            <legend>STATUT DE CASTE</legend>
            
            {# On va rendre manuellement les boutons radio, mais une seule fois via form_widget(form.status) #}
        
            {% set statusesByCaste = {} %}
            {% for choice in form.status.vars.choices %}
                {% set status = choice.data %}
                {% set casteName = status.caste ? status.caste.name : 'Autres' %}
        
                {% if statusesByCaste[casteName] is not defined %}
                    {% set statusesByCaste = statusesByCaste|merge({ (casteName): [] }) %}
                {% endif %}
        
                {% set statusesByCaste = statusesByCaste|merge({
                    (casteName): statusesByCaste[casteName] | merge([{
                        'value': choice.value,
                        'label': choice.label,
                        'status': status
                    }])
                }) %}
            {% endfor %}
        
            {% for casteName, items in statusesByCaste %}
                <h3>{{ casteName }}</h3>
                <ul>
                    {% for item in items %}
                        <li>
                            <label>
                                <input
                                    type="radio"
                                    name="{{ form.status.vars.full_name }}"
                                    value="{{ item.value }}"
                                    {% if form.status.vars.value == item.value %}checked="checked"{% endif %}
                                >
                                <strong>{{ item.label }}</strong>
                            {% if item.status.level %}
                                <div class="level">niveau {{ item.status.level }}</div>
                            {% endif %}
                            {% for benefit in benefits %}
                                {% if benefit.status == item.status %}
                                    <div>le benefice: {{ benefit.name }}</div>
                                {% endif %}
                            {% endfor %}
                            {% for technic in technics %}
                                {% if technic.status == item.status %}
                                    <div>la technique: {{ technic.name }}</div>
                                {% endif %}
                            {% endfor %}
                            </label>
        
                            {% if item.status.description %}
                                <div class="description">{{ item.status.description }}</div>
                                
                            {% endif %}
        
                        </li>
                    {% endfor %}
                </ul>
            {% endfor %}
        
            {# Marquer le champ comme rendu pour éviter erreur #}
            {% do form.status.setRendered %}
        
            <span class="lock">
               {# <button type="button" onclick="toggleLock(['section-status'], event)">🔒</button> #}
            </span>
        </fieldset>                  



		<fieldset id="section-bans">
		    <legend>INTERDITS DE CASTE</legend>
		
		    {% set bansByCaste = {} %}
		    {% for key, choice in form.ban.vars.choices %}
		        {% set ban = choice.data %}
		        {% set radio = form.ban[key] %}
		
		        {% set casteName = ban.caste ? ban.caste.name : 'Autres' %}
		
		        {% if bansByCaste[casteName] is not defined %}
		            {% set bansByCaste = bansByCaste|merge({ (casteName): [] }) %}
		        {% endif %}
		
		        {% set bansByCaste = bansByCaste|merge({
		            (casteName): bansByCaste[casteName] | merge([{
		                'radio': radio,
		                'ban': ban
		            }])
		        }) %}
		    {% endfor %}
		
		    {% for casteName, bans in bansByCaste %}
		        <div class="caste-group">
		            <input type="checkbox" id="toggle-bans-{{ loop.index }}" class="caste-toggle">
		            <label for="toggle-bans-{{ loop.index }}" class="caste-label">{{ casteName }}</label>
		
		            <div class="caste-details">
		                <ul>
		                    {% for item in bans %}
		                        <li class="caste-group-item">
		                            <span class="real-radio">
		                                {{ form_widget(item.radio) }}
		                            </span>
		                            <strong>{{ item.ban.name }}</strong>
		                            {% if item.ban.description %}
		                                <div class="description">{{ item.ban.description|raw }}</div>
		                            {% endif %}
		                        </li>
		                    {% endfor %}
		                </ul>
		            </div>
		        </div>
		    {% endfor %}
		</fieldset>









                
                
        <fieldset id="section-caracteristics">
            <legend class="tooltip">
                <a href="{{ path('player_campaign_view_rules', {'userid': app.user.id, 'campaignid': campaign.id}) }}" target="_blank" >CARACTERISTIQUES</a>  
                    <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i>
                        <span class="tooltiptext">
                            Le système propose huit castes très différentes les unes des autres. Au sein de Prophecy, il n'est pas possible de changer de caste, une fois celle-ci choisie, le personnage en suivra la philosophie et les voies proposées.
                            Chaque caste donne accès à des compétences, des capacités, des privilèges en grande partie uniques.
                            Rapprochez-vous du maître de jeu pour vous assurer que le choix effectué est compatible avec ce qu'il propose. Pour un descriptif plus détaillé, veuillez suivre le lien proposé.    
                        </span>                     
            </legend>
                {{ form_row(form.caracteristics) }}
                
                <span class="lock">
                {# <button type="button" onclick="toggleLock(['section-majorAttributes'], event)">🔒</button> #}
                </span>

                <span class="initalValues">
                    {% for value in caracteristicsStart %}
                        {# <button type="button" class="initial-value-btn" data-value="{{ value }}">{{ value }}</button> #}
                    {% endfor %}
                </span>
                <span>                                
                    {# {{ form.caracteristics.vars.data[0].caracteristic.minimumValue }} #}
                </span>
        </fieldset>
                
        <fieldset id="section-majorAttributes">
            <legend class="tooltip">
                <a href="{{ path('player_campaign_view_rules', {'userid': app.user.id, 'campaignid': campaign.id}) }}" target="_blank" >ATTRIBUTS MAJEURS</a>  
                    <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i></legend>
                {{ form_row(form.majorAttributes) }}
                    <span class="lock"><button type="button" onclick="toggleLock(['section-minorAttributes'], event)">🔒</button></span>
                    <span class="initalValues">
                    {% for value in majorAttributesStart %}
                        {# <button type="button" class="initial-value-btn" data-value="{{ value }}">{{ value }}</button> #}
                    {% endfor %}
                
                    </span>            
        </fieldset>
                
        
        <fieldset id="section-minorAttributes">
                <legend class="tooltip">
                    <a href="{{ path('player_campaign_view_rules', {'userid': app.user.id, 'campaignid': campaign.id}) }}" target="_blank" >ATTRIBUTS MINEURS</a>  
                    <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i></legend>
                {{ form_widget(form.minorAttributes, { attr: {'class': 'minor-field'} }) }}
                <p>points libres à répartir : <span id="free-minor">{{ free_minorAttributes }}</span></p>
                {{ form_widget(form.freeMinorPoints) }}
                    <span class="lock"><button type="button" onclick="toggleLock(['section-nation'], event)">🔒</button></span>
                <span class="initalValues">
                    {% for value in free_minorAttributes %}
                      {#  <button type="button" class="initial-value-btn" data-value="{{ value }}">{{ value }}</button> #}
                    {% endfor %}
                
                </span>                                   
        </fieldset>


        <fieldset id="section-nation">
            <legend class="tooltip">
                <a href="{{ path('player_campaign_view_rules', {'userid': app.user.id, 'campaignid': campaign.id}) }}" 
                    target="_blank">NATION</a>
                <i id="section_af" class="fa-solid fa-circle-question fa-lg" style="color: #1765DA;"></i>
                <span class="tooltiptext">
                    Le système propose plusieurs nations d'origine d'un personnage
                </span>
            </legend>
        
            <div class="nation-group">
        
        {% for choice in form.nation.vars.choices %}
            {% set nation = choice.data %}
            {% set radio = form.nation[choice.value] %}
            {% set id = 'nation-radio-' ~ loop.index %}
        
            <div class="nation-group-item">
        
                <input type="radio"
                       id="{{ id }}"
                       name="{{ radio.vars.full_name }}"
                       value="{{ radio.vars.value }}"
                       class="nation-radio"
                       {% if radio.vars.checked %}checked{% endif %}
                >
        
                <label for="{{ id }}" class="nation-label">{{ nation.name }}</label>
        
                <div class="nation-details">
                    {% if nation.description %}
                        <div class="description">{{ nation.description|raw }}</div>
                    {% endif %}
                </div>
            </div>
        {% endfor %} 
            </div>
        </fieldset>

               
        <fieldset id="section-tendencies">
                <legend class="tooltip">TENDANCES</legend>
                    {{ form_row(form.tendencies) }}
                    <p id="free-points" data-free="{{ free_tendencies }}">
				    Points libres à répartir : {{ free_tendencies }}
				    </p>
                    <span class="lock"><button type="button" onclick="toggleLock(['section-disadvantages'], event)">🔒</button></span>
                    <span class="initalValues">
                        {% for value in free_tendencies %}
                            {#  <button type="button" class="initial-value-btn" data-value="{{ value }}">{{ value }}</button> #}
                        {% endfor %}
                
                    </span>                                    
        </fieldset> 
               
                
        <fieldset id="section-disadvantages">
            <legend class="tooltip">DÉSAVANTAGES</legend>
        	<div>
            Points gagnés : <span id="disadvantagePoints">0</span>
        	</div>
            {# Regrouper les désavantages par catégorie #}
            {% set disadvantagesByCategory = {} %}
            {% for key, choice in form.disadvantages.vars.choices %}
                {% set disadvantage = choice.data %}
                {% set checkbox = form.disadvantages[key] %}
                
                {% set categoryName = disadvantage.disadvantageCategory ? disadvantage.disadvantageCategory.name : 'Autres' %}
                
                {% if disadvantagesByCategory[categoryName] is not defined %}
                    {% set disadvantagesByCategory = disadvantagesByCategory|merge({ (categoryName): [] }) %}
                {% endif %}
                
                {% set disadvantagesByCategory = disadvantagesByCategory|merge({
                    (categoryName): disadvantagesByCategory[categoryName] | merge([{
                        'checkbox': checkbox,
                        'disadvantage': disadvantage
                    }])
                }) %}
            {% endfor %}
        
            {# Afficher par catégorie #}
            {% for categoryName, disadvantages in disadvantagesByCategory %}
                <div class="disadvantage-group">
                    <input type="checkbox" id="toggle-dis-{{ loop.index }}" class="disadvantage-toggle">
                    <label for="toggle-dis-{{ loop.index }}" class="disadvantage-label">{{ categoryName }}</label>
        
                    <div class="disadvantages-details">
                        <ul>
                            {% for item in disadvantages %}
                                <li>
        							{{ form_widget(item.checkbox, {
        							    attr: {
        							        'class': 'disadvantage-checkbox',
        							        'data-cost': item.disadvantage.cost
        							    }
        							}) }}
                                    <strong>{{ item.disadvantage.name }}</strong>
                                    {% if item.disadvantage.cost is not null %}
                                        <em>(coût : {{ item.disadvantage.cost }})</em>
                                    {% endif %}
                                    {% if item.disadvantage.description %}
                                        <div class="description">{{ item.disadvantage.description|raw }}</div>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            {% endfor %}
            <span class="lock">
               {# <button type="button" onclick="toggleLock(['section-advantages'], event)">🔒</button> #}
            </span>
        </fieldset>                     
        
                                
        <fieldset id="section-advantages">
            <legend class="tooltip">AVANTAGES</legend>
            <div>
            Points restants : <span id="advantagePoints">0</span>
        	</div>
        
            {# Regrouper les avantages par catégorie #}
            {% set advantagesByCategory = {} %}
            {% for key, choice in form.advantages.vars.choices %}
                {% set advantage = choice.data %}
                {% set checkbox = form.advantages[key] %}
                
                {% set categoryName = advantage.advantageCategory ? advantage.advantageCategory.name : 'Autres' %}
                
                {% if advantagesByCategory[categoryName] is not defined %}
                    {% set advantagesByCategory = advantagesByCategory|merge({ (categoryName): [] }) %}
                {% endif %}
                
                {% set advantagesByCategory = advantagesByCategory|merge({
                    (categoryName): advantagesByCategory[categoryName] | merge([{
                        'checkbox': checkbox,
                        'advantage': advantage
                    }])
                }) %}
            {% endfor %}
        
            {# Afficher par catégorie #}
            {% for categoryName, advantages in advantagesByCategory %}
                <h3>{{ categoryName }}</h3>
                <ul>
                    {% for item in advantages %}
                        <li>
                            {{ form_widget(item.checkbox) }}
                            <strong>{{ item.advantage.name }}</strong>
                            {% if item.advantage.cost is not null %}
                                <em>(coût : {{ item.advantage.cost }})</em>
                            {% endif %}
                            {% if item.advantage.description %}
                                <div class="description">{{ item.advantage.description }}</div>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ul>
            {% endfor %}
         
            <span class="lock">
              {#  <button type="button" onclick="toggleLock(['section-advantages'], event)">🔒</button> #}
            </span>
        </fieldset>


        <fieldset id="section-reputation">
            <legend class="tooltip">REPUTATION</legend>
        
            XP restant: <div class="startXPRemaining">{{ startXP }}</div>
        
            <p>Coût : <label id="fame_cost">1</label></p>
        
            {{ form_row(form.fame) }}
        </fieldset>

 
        <fieldset id="section-skills">
            <legend class="tooltip">COMPÉTENCES</legend>
        	XP restant: <div class="startXPRemaining">{{ startXP }}</div>
            <div id="skill-collection-wrapper">
                {% set groupedSkills = {} %}
         
                {% for skillForm in form.skills %}
                    {% set selectedSkill = skillForm.skill.vars.data %}
                    
                    {% if selectedSkill %}
                        {% set category = selectedSkill.Skillcategory.name %}
                    {% else %}
                        {% set category = 'Sans catégorie' %}
                    {% endif %}
        
                    {% if groupedSkills[category] is not defined %}
                        {% set groupedSkills = groupedSkills|merge({ (category): [skillForm] }) %}
                    {% else %}
                        {% set groupedSkills = groupedSkills|merge({ (category): groupedSkills[category]|merge([skillForm]) }) %}
                    {% endif %}
                {% endfor %}
                {% for category, skills in groupedSkills %}
                    <div class="skill-category-block">
                        <h4 class="skill-category-title">Catégorie : {{ category }}</h4>
        
                        <table class="skill-table">
                            <thead>
                                <tr>
                                    <th>Compétence</th>
                                    <th>Coût</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for skillForm in skills %}
                                    {% set selectedSkill = skillForm.skill.vars.data %}
                                    <tr class="skill-entry"
            							data-cost="{{ selectedSkill.cost is defined and selectedSkill.cost is not null ? selectedSkill.cost : 0 }}">
                                        <td >
                                            {{ selectedSkill.name }}
                                        </td>
                                        <td class="skill-value">
                                            {{ form_widget(skillForm.value, { attr: { class: 'skill-value-input' } }) }}
                                        </td>
                                        <td class="skill-cost" id="skill-cost">
                                            {% if selectedSkill is defined and selectedSkill.cost is defined and selectedSkill.cost is not null %}
                                                {{ selectedSkill.cost }}
                                            {% else %}
                                                <em>—</em>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endfor %}
            </div>
        </fieldset> 
  
  
        <fieldset id="section-favours">
            <legend class="tooltip">FAVEURS</legend>
        	XP restant: <div class="startXPRemaining">{{ startXP }}</div> 
            {# Regrouper les faveurs par caste #}
            {% set favoursByCaste = {} %}
            {% for key, choice in form.favours.vars.choices %}
                {% set favour = choice.data %}
                {% set checkbox = form.favours[key] %}
                
                {% set casteName = favour.caste ? favour.caste.name : 'Autres' %}
                
                {% if favoursByCaste[casteName] is not defined %}
                    {% set favoursByCaste = favoursByCaste|merge({ (casteName): [] }) %}
                {% endif %}
                
                {% set favoursByCaste = favoursByCaste|merge({
                    (casteName): favoursByCaste[casteName] | merge([{
                        'checkbox': checkbox,
                        'favour': favour
                    }])
                }) %}
            {% endfor %}
            {% for casteName, favours in favoursByCaste %}
                {# --- Début accordéon --- #}
                <div class="favour-group">
                    <input type="checkbox" id="toggle-fav-{{ loop.index }}" class="favour-toggle">
                    <label for="toggle-fav-{{ loop.index }}" class="favour-label">{{ casteName }}</label>
        			
                    <div class="favours-details">
                        <ul>
                            {% for item in favours %}
                                <li>
                                    {{ form_widget(item.checkbox, { attr: { 'data-cost': item.favour.xpCost ?? 0 } }) }}
                                    <strong>{{ item.favour.name }}</strong>
                                    {% if item.favour.xpCost is not null %}
                                        <em>(coût : {{ item.favour.xpCost }})</em>
                                    {% endif %}
                                    {% if item.favour.description %}
                                        <div class="description">{{ item.favour.description|raw }}</div>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            {% endfor %}
            <span class="lock">
               {# <button type="button" onclick="toggleLock(['section-advantages'], event)">🔒</button> #}
            </span>
        </fieldset>             


        <fieldset id="section-disciplines">
            <legend class="tooltip">DISCIPLINES</legend>
            XP restant: <div class="startXPRemaining">{{ startXP }}</div> 
        
            <table>
                <thead>
                    <tr>
                        <th>Discipline</th>
                        <th>Niveau</th>
                        <th>Coût</th>
                    </tr>
                </thead>
                <tbody>
                    {% for discipline in form.disciplines %}
                        {% if discipline.vars.prototype is not defined %}
                        <tr class="discipline-entry">
                            <td>{{ discipline.vars.label }}</td>
                            <td>{{ form_widget(discipline, { attr: { class: 'discipline-input' } }) }}</td>
                            <td class="discipline-cost">1</td>
                        </tr>
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </fieldset>


        <fieldset id="section-spheres">
            <legend class="tooltip">SPHERES</legend>
            XP restant: <div class="startXPRemaining">{{ startXP }}</div> 
        
            <table>
                <thead>
                    <tr>
                        <th>Sphere</th>
                        <th>Niveau</th>
                        <th>Coût</th>
                    </tr>
                </thead>
                <tbody>
                    {% for sphere in form.spheres %}
                        {% if sphere.vars.prototype is not defined %}
                        <tr class="sphere-entry">
                            <td>{{ sphere.vars.label }}</td>
                            <td>{{ form_widget(sphere, { attr: { class: 'sphere-input' } }) }}</td>
                            <td class="sphere-cost">1</td>
                        </tr>
                        {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </fieldset>

                          
        <fieldset id="section-spells">
            <legend class="tooltip">SORTS</legend>
            {# Regrouper les sorts par sphere #}
            {% set spellsBySphere = {} %}
            {% for key, choice in form.spells.vars.choices %}
                {% set spell = choice.data %}
                {% set checkbox = form.spells[key] %}
                
                {% set sphereName = spell.sphere ? spell.sphere.name : 'Autres' %}
                
                {% if spellsBySphere[sphereName] is not defined %}
                    {% set spellsBySphere = spellsBySphere|merge({ (sphereName): [] }) %}
                {% endif %}
                
                {% set spellsBySphere = spellsBySphere|merge({
                    (sphereName): spellsBySphere[sphereName] | merge([{
                        'checkbox': checkbox,
                        'spell': spell
                    }])
                }) %}
            {% endfor %}        
            {# Afficher par sphere #}
            {% for sphereName, spells in spellsBySphere %}
                <div class="spell-group">
                    <input type="checkbox" id="toggle-spell-{{ loop.index }}" class="spell-toggle">
                    <label for="toggle-spell-{{ loop.index }}" class="spell-label">{{ sphereName }}</label>
                    <div class="spells-details">
                        <ul>
                            {% for item in spells %}
                                <li>
                                    {{ form_widget(item.checkbox) }}
                                    <strong>{{ item.spell.name }}</strong>
                                    {% if item.spell.manaCost is not null %}
                                        <em>(coût : {{ item.spell.manaCost }})</em>
                                    {% endif %}
                                    {% if item.spell.description %}
                                        <div class="description">{{ item.spell.description|raw }}</div>
                                    {% endif %}
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            {% endfor %}
            <span class="lock">
              {#  <button type="button" onclick="toggleLock(['section-advantages'], event)">🔒</button> #}
            </span>
        </fieldset>                                
             
        <fieldset id="section-currencies">
            <legend class="tooltip">ARGENT</legend>
                {{ form_row(form.currencies) }}
        </fieldset>
          
          
<p>PROBLEME CONSTATE AVEC ARMES ARMURES BOUCLIERS : CONFUSION ENTRE SHOP ET EQUIPEMENT DETENU PAR LE PERSONNAGE.
L AJOUT FONCTIONNE BIEN SUR FIGURESHEET MAIS LE RENDU N EST PAS BON CAR ON AFFICHE LE SHOP ET PAS LE POSSEDE
</p>          
                
        <fieldset id="section-weapons">
            <legend class="tooltip">ARMES</legend>
        
            <div id="weapon-collection-wrapper"
                 data-prototype="{{ form_widget(form.weapons.vars.prototype)|e('html_attr') }}">
        
                {% set groupedWeapons = {} %}
        
                {# Étape 1 : Grouper les armes par catégorie #}
                {% for weaponForm in form.weapons %}
                    {% set selectedWeapon = weaponForm.weapon.vars.data %}
                    {% set category = selectedWeapon and selectedWeapon.weaponCategory ? selectedWeapon.weaponCategory.name : 'Sans catégorie' %}
                    {% if groupedWeapons[category] is not defined %}
                        {% set groupedWeapons = groupedWeapons|merge({ (category): [weaponForm] }) %}
                    {% else %}
                        {% set groupedWeapons = groupedWeapons|merge({ (category): groupedWeapons[category]|merge([weaponForm]) }) %}
                    {% endif %}
                {% endfor %}
        
                {# Étape 2 : Afficher les groupes sous forme d’accordéons CSS #}
                {% for category, weapons in groupedWeapons %}
                    <div class="weapon-group">
                        <input type="checkbox" id="toggle-weapon-{{ loop.index }}" class="weapon-toggle">
                        <label for="toggle-weapon-{{ loop.index }}" class="weapon-label">
                            Catégorie : {{ category }}
                        </label>
        
                        <div class="weapons-details">
                            <table>
                                <thead>
                                    <tr>
                                        <th>arme</th>
                                        <th>quantités</th>
                                        <th>prix</th>
                                        <th>dégâts</th>
                                        <th>initiative de mêlée</th>
                                        <th>initiative de contact</th>
                                        <th>portée effective</th>
                                        <th>portée maximale</th>
                                        <th>spécial</th>
                                        <th>description</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for weaponForm in weapons %}
                                        {% set selectedWeapon = weaponForm.weapon.vars.data %}
                                        <tr>
                                            <td>{{ form_row(weaponForm.weapon) }}</td>
                                            <td>{{ form_row(weaponForm.quantity) }}</td>
        
                                            {% if selectedWeapon %}
                                                <td>{{ selectedWeapon.cityPrice }}</td>
                                                <td>{{ selectedWeapon.damages }}</td>
                                                <td>{{ selectedWeapon.meleeInitiative }}</td>
                                                <td>{{ selectedWeapon.contactInitiative }}</td>
                                                <td>{{ selectedWeapon.effectiveRange }}</td>
                                                <td>{{ selectedWeapon.maximumRange }}</td>
                                                <td>{{ selectedWeapon.special }}</td>
                                                <td>{{ selectedWeapon.description|raw }}</td>
                                            {% else %}
                                                <td colspan="8"><em>Aucune arme sélectionnée</em></td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% endfor %}
        
                <span class="lock"></span>
            </div>
        </fieldset>             


        <fieldset id="section-armors">
            <legend class="tooltip">ARMURES</legend>
        
            <div id="armor-collection-wrapper"
                 data-prototype="{{ 
                     '<tr class=\'armor-entry\'>
                         <td>' ~ form_widget(form.armors.vars.prototype.armor, {'attr': {'disabled': 'disabled'}})|e('html_attr') ~ '</td>
                         <td>' ~ form_widget(form.armors.vars.prototype.quantity)|e('html_attr') ~ '</td>
                         <td></td>
                         <td></td>
                     </tr>' 
                 }}">
        
                {% set groupedArmors = {} %}
        
                {# Grouper les armures par catégorie #}
                {% for armorForm in form.armors %}
                    {% set selectedArmor = armorForm.armor.vars.data %}
                    {% set category = selectedArmor and selectedArmor.Armorcategory ? selectedArmor.Armorcategory.name : 'Sans catégorie' %}
                    {% if groupedArmors[category] is not defined %}
                        {% set groupedArmors = groupedArmors|merge({ (category): [armorForm] }) %}
                    {% else %}
                        {% set groupedArmors = groupedArmors|merge({ (category): groupedArmors[category]|merge([armorForm]) }) %}
                    {% endif %}
                {% endfor %}
        
                {# Affichage des groupes sous forme d’accordéon CSS #}
                {% for category, armors in groupedArmors %}
                    <div class="armor-group">
                        <input type="checkbox" id="toggle-armor-{{ loop.index }}" class="armor-toggle">
                        <label for="toggle-armor-{{ loop.index }}" class="armor-label">
                            Catégorie : {{ category }}
                        </label>
        
                        <div class="armors-details">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Armure</th>
                                        <th>Quantité</th>
                                        <th>Prix</th>
                                        <th>Protection</th>
                                        <th>Pénalité de mouvement</th>
                                        <th>Spécial</th>
                                        <th>Description</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for armorForm in armors %}
                                        {% set armor = armorForm.armor.vars.data %}
                                        <tr class="armor-entry">
                                            <td>{{ form_widget(armorForm.armor, {'attr': {'disabled': 'disabled'}}) }}</td>
                                            <td>{{ form_widget(armorForm.quantity) }}</td>
        
                                            {% if armor %}
                                                <td>{{ armor.cityPrice }}</td>
                                                <td>{{ armor.protection }}</td>
                                                <td>{{ armor.penaltyMovement }}</td>
                                                <td>{{ armor.special }}</td>
                                                <td>{{ armor.description|raw }}</td>
                                            {% else %}
                                                <td colspan="5"><em>Aucune armure sélectionnée</em></td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% endfor %}
        
                <span class="lock"></span>
            </div>
        </fieldset>


        <fieldset id="section-shields">
            <legend class="tooltip">BOUCLIERS</legend>
        
            <div id="shield-collection-wrapper"
                 data-prototype="{{ 
                     '<tr class=\'shield-entry\'>' ~
                         '<td>' ~ form_widget(form.shields.vars.prototype.shield, {'attr': {'disabled': 'disabled'}})|e('html_attr') ~ '</td>' ~
                         '<td>' ~ form_widget(form.shields.vars.prototype.quantity)|e('html_attr') ~ '</td>' ~
                         '<td></td>' ~
                         '<td></td>' ~
                     '</tr>' 
                 }}">
        
                {% set groupedShields = {} %}
        
                {# Grouper tous les boucliers sous une seule catégorie (si besoin) #}
                {% for shieldForm in form.shields %}
                    {% set selectedShield = shieldForm.shield.vars.data %}
                    {% set category = 'Boucliers' %}
                    {% if groupedShields[category] is not defined %}
                        {% set groupedShields = groupedShields|merge({ (category): [shieldForm] }) %}
                    {% else %}
                        {% set groupedShields = groupedShields|merge({ (category): groupedShields[category]|merge([shieldForm]) }) %}
                    {% endif %}
                {% endfor %}
        
                {# Affichage sous forme d’accordéon CSS #}
                {% for category, shields in groupedShields %}
                    <div class="shield-group">
                        <input type="checkbox" id="toggle-shield-{{ loop.index }}" class="shield-toggle">
                        <label for="toggle-shield-{{ loop.index }}" class="shield-label">
                            {{ category }}
                        </label>
        
                        <div class="shields-details">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Bouclier</th>
                                        <th>Quantité</th>
                                        <th>Prix</th>
                                        <th>Protection</th>
                                        <th>Pénalité de mouvement</th>
                                        <th>Spécial</th>
                                        <th>Description</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for shieldForm in shields %}
                                        {% set shield = shieldForm.shield.vars.data %}
                                        <tr class="shield-entry">
                                            <td>{{ form_widget(shieldForm.shield, {'attr': {'disabled': 'disabled'}}) }}</td>
                                            <td>{{ form_widget(shieldForm.quantity) }}</td>
        
                                            {% if shield %}
                                                <td>{{ shield.cityPrice }}</td>
                                                <td>{{ shield.protection }}</td>
                                                <td>{{ shield.penaltyMovement }}</td>
                                                <td>{{ shield.special }}</td>
                                                <td>{{ shield.description|raw }}</td>
                                            {% else %}
                                                <td colspan="5"><em>Aucun bouclier sélectionné</em></td>
                                            {% endif %}
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% endfor %}
        
                <span class="lock"></span>
            </div>
        </fieldset>                         

                
        <fieldset id="section-items">
            <legend class="tooltip">OBJETS DIVERS</legend>
        
            <div id="item-collection-wrapper"
                 data-prototype="{{ 
                     '<tr class=\'item-entry\'>' ~
                         '<td>' ~ form_widget(form.items.vars.prototype.item, {'attr': {'disabled': 'disabled'}})|e('html_attr') ~ '</td>' ~
                         '<td>' ~ form_widget(form.items.vars.prototype.quantity)|e('html_attr') ~ '</td>' ~
                         '<td></td>' ~
                     '</tr>' 
                 }}">
        
                {% set groupedItems = {} %}
        
                {# Grouper par catégorie #}
                {% for itemForm in form.items %}
                	
                    {% set selectedItem = itemForm.item.vars.data %}
                    {% set category = selectedItem ? selectedItem.Itemcategory.name : 'Sans catégorie' %}
                    {% if groupedItems[category] is not defined %}
                        {% set groupedItems = groupedItems|merge({ (category): [itemForm] }) %}
                    {% else %}
                        {% set groupedItems = groupedItems|merge({ (category): groupedItems[category]|merge([itemForm]) }) %}
                    {% endif %}
                {% endfor %}
        
                {# Affichage accordéon CSS #}
                {% for category, items in groupedItems %}
                    <div class="item-group">
                        <input type="checkbox" id="toggle-item-{{ loop.index }}" class="item-toggle">
                        <label for="toggle-item-{{ loop.index }}" class="item-label">
                            {{ category }}
                        </label>
        
                        <div class="items-details">
                            <table>
                                <thead>
                                    <tr>
                                        <th>Objet</th>
                                        <th>Quantité</th>
                                        <th>Prix</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for itemForm in items %}
                                        {% set item = itemForm.item.vars.data %}
                                        <tr class="item-entry">
                                            <td>{{ form_widget(itemForm.item, {'attr': {'disabled': 'disabled'}}) }}</td>
                                            <td>{{ form_widget(itemForm.quantity) }}</td>
                                            <td>{{ item ? item.cityPrice : '' }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% endfor %}
        
                <span class="lock"></span>
            </div>
        </fieldset>           


<p>
    Total de points dépensés : 
    <strong id="total-xp">0</strong>
</p>
                                
             
                 {{ form_row(form.submit) }}
               
<div class="hidden-fields">
                 {# {{ form_rest(form, { 'status': false }) }} #}
</div>
{{ form_row(form._token) }} {# inclut explicitement le CSRF #}
{{ form_end(form, { render_rest: false }) }}  
            
{% endblock %}


{% block javascript %}
    {{ parent() }}
    
/* JS sheet xp manage */    






/**
* Function to decrease a value reputation, skill, 
* discipline, sphere, minor or major attribute, 
*
* @param {number} value value of decrease    
* @param {number} currentValue value to decrease
* @param {number} minValue minimum value
* @returns {number} new value or -1
*/
function decreaseXP (value, currentValue, minValue)
{
	let currentXP = -1;
	if(currentValue - value >= 0 && currentValue - value >= minValue)
	{
		currentXP = currentValue - value;
	}
	return currentXP;
}


/**
* Function to decrease a value reputation, skill, 
* discipline, sphere, minor or major attribute,
*
* @param {number} value value of increase    
* @param {number} currentValue value to increase
* @param {number} maxValue maximum value
* @returns {number} new value or -1
*/
function increaseXP (value, currentValue, maxValue)
{
	let currentXP = -1;
	if(currentValue + value >= 0 && currentValue + value <= maxValue)
	{
		currentXP = currentValue + value;
	}
	return currentXP;
}


/**
* Function to increase total xp spent
*
* @param {number} currentValue value of current xp    
* @param {number} value value to increase xp
* @returns {number} total 
*/
function totalXPSpent (currentValue, value)
{
	let total = currentValue + value;
	return total;
}


/**
* Function to calculate xp remaining
*
* @param {number} currentValue value of current xp    
* @param {number} value value to decrease currentValue
* @returns {number} remainingXP 
*/
function xpRemaining (currentValue, value)
{
	let remainingXP = currentValue - value;
	return remainingXP;	
}


/**
* Function to read a value from a DOM element
*
* @param {number} id element    
* @returns {number} readed value
*/
function readValue(element)
{
	let value = parseInt(document.getElementById(element).innerHTML);
	return value;
}


/**
* Function to write a value in a DOM element
*
* @param {number} id element where to write value 
* @param {number} value to write
* @returns {number} null
*/
function writeValue(element, value)
{
	const elementDOM = document.getElementById(element);
	elementDOM.textContent = value;
}	


/* declenchement d'une action a chaque clic */
document.addEventListener("DOMContentLoaded", () => {

	// —> input de la Réputation
	document.querySelectorAll('#section-reputation input[type="number"]')
	    .forEach(input =>
	        input.addEventListener('input', handleReputationChange)
	    );

    // —> input des skills
    document.querySelectorAll('.skill-entry .skill-value input')
        .forEach(input =>
            input.addEventListener('input', (event) => {
                handleSkillChange(event);
                // otherFunction();
                // ...
            })
        );

    // —> input des disciplines
    document.querySelectorAll('.discipline-entry input[type="number"]')
        .forEach(input =>
            input.addEventListener('input', (event) => {
                handleDisciplineChange(event);
                // otherFunction();
                // ...
            })
        );

    // —> input des sphères
    document.querySelectorAll('.sphere-entry input[type="number"]')
        .forEach(input =>
            input.addEventListener('input', (event) => {
                handleSphereChange(event);
                // otherFunction();
                // ...
            })
        );
});  
  
function handleSkillChange(event) {
    const input = event.target;
    const row = input.closest('.skill-entry');

    let previousValue = input.dataset.prevValue !== undefined ? Number(input.dataset.prevValue) : 0;
    let currentValue = Number(input.value);
    if (currentValue < 0) currentValue = 0;
    input.value = currentValue;

    let direction = 0;
    if (currentValue > previousValue) direction = 1;
    else if (currentValue < previousValue) direction = -1;

    let previousCost = previousValue + 1;

    const startXPValue = parseInt(document.getElementById('startXP').textContent);
    let currentXPSpentValue = parseInt(document.getElementById('startXPSpent').textContent);
    const xpRemaining = startXPValue - currentXPSpentValue;

    // Blocage si augmentation impossible
    if (direction === 1 && xpRemaining < previousCost) {
        input.value = previousValue;
        return;
    }

    // Ajustement XP dépensé
    if (direction === 1) {
        currentXPSpentValue += previousCost;
    } else if (direction === -1) {
        currentXPSpentValue -= previousCost - 1;
        if (currentXPSpentValue < 0) currentXPSpentValue = 0;
    }

    document.getElementById('startXPSpent').textContent = currentXPSpentValue;
    //document.getElementById('startXPRemaining').textContent = startXPValue - currentXPSpentValue;
	document.querySelectorAll('.startXPRemaining')
    .forEach(el => el.textContent = startXPValue - currentXPSpentValue);

	//mise a jour du champ xperience
	document.querySelector('input.startXPRemaining').value = startXPValue - currentXPSpentValue;

    // Mise à jour du coût affiché
    const costCell = row.querySelector('.skill-cost');
    if (costCell) {
        costCell.textContent = currentValue + 1;
    }

    // Sauvegarde pour la prochaine fois
    input.dataset.prevValue = currentValue;
}

// Attacher le listener à chaque input number dans les Skills
document.querySelectorAll('.skill-entry input[type="number"]').forEach(input => {
    input.addEventListener('input', handleSkillChange);
    input.dataset.prevValue = Number(input.value) || 0; // initialiser prevValue
});
  
function handleDisciplineChange(event) {
    const input = event.target;
    const row = input.closest('.discipline-entry');

    let previousValue = input.dataset.prevValue !== undefined ? Number(input.dataset.prevValue) : 0;
    let currentValue = Number(input.value);
    if (currentValue < 0) currentValue = 0;
    input.value = currentValue;

    let direction = 0;
    if (currentValue > previousValue) direction = 1;
    else if (currentValue < previousValue) direction = -1;

    let previousCost = previousValue + 1;

    let startXPValue = parseInt(document.getElementById('startXP').textContent);
    let currentXPSpentValue = parseInt(document.getElementById('startXPSpent').textContent);

    // Blocage si augmentation impossible
    if (direction === 1 && (startXPValue - currentXPSpentValue) < previousCost) {
        input.value = previousValue;
        return;
    }

    // Ajustement XP dépensé
    if (direction === 1) {
        currentXPSpentValue += previousCost;
    } else if (direction === -1) {
        currentXPSpentValue -= previousCost - 1;
        if (currentXPSpentValue < 0) currentXPSpentValue = 0;
    }
    document.getElementById('startXPSpent').textContent = currentXPSpentValue;
    //document.getElementById('startXPRemaining').textContent = startXPValue - currentXPSpentValue;
	document.querySelectorAll('.startXPRemaining')
    .forEach(el => el.textContent = startXPValue - currentXPSpentValue);

	//mise a jour du champ xperience
	document.querySelector('input.startXPRemaining').value = startXPValue - currentXPSpentValue;


    // Mise à jour du coût affiché
    const costCell = row.querySelector('.discipline-cost');
    if (costCell) {
        costCell.textContent = currentValue + 1;
    }

    input.dataset.prevValue = currentValue;
}

document.querySelectorAll('.discipline-entry input[type="number"]').forEach(input => {
    input.addEventListener('input', handleDisciplineChange);
});


function handleSphereChange(event) {
    const input = event.target;
    const row = input.closest('.sphere-entry');

    let previousValue = input.dataset.prevValue !== undefined ? Number(input.dataset.prevValue) : 0;
    let currentValue = Number(input.value);
    if (currentValue < 0) currentValue = 0;
    input.value = currentValue;

    let direction = 0;
    if (currentValue > previousValue) direction = 1;
    else if (currentValue < previousValue) direction = -1;

    let previousCost = previousValue + 1;

    let startXPValue = parseInt(document.getElementById('startXP').textContent);
    let currentXPSpentValue = parseInt(document.getElementById('startXPSpent').textContent);

    // Blocage si augmentation impossible
    if (direction === 1 && (startXPValue - currentXPSpentValue) < previousCost) {
        input.value = previousValue;
        return;
    }

    // Ajustement XP dépensé
    if (direction === 1) {
        currentXPSpentValue += previousCost;
    } else if (direction === -1) {
        currentXPSpentValue -= previousCost - 1;
        if (currentXPSpentValue < 0) currentXPSpentValue = 0;
    }
    document.getElementById('startXPSpent').textContent = currentXPSpentValue;
    //document.getElementById('startXPRemaining').textContent = startXPValue - currentXPSpentValue;
	document.querySelectorAll('.startXPRemaining')
    .forEach(el => el.textContent = startXPValue - currentXPSpentValue);

	//mise a jour du champ xperience
	document.querySelector('input.startXPRemaining').value = startXPValue - currentXPSpentValue;


    // Mise à jour du coût affiché
    const costCell = row.querySelector('.sphere-cost');
    if (costCell) {
        costCell.textContent = currentValue + 1;
    }

    input.dataset.prevValue = currentValue;
}

document.querySelectorAll('.sphere-entry input[type="number"]').forEach(input => {
    input.addEventListener('input', handleSphereChange);
});



function handleReputationChange(event) {
    const input = event.target;

    let prevValue = input.dataset.prevValue !== undefined ? Number(input.dataset.prevValue) : 0;
    let currentValue = Number(input.value);
    if (currentValue < 0) currentValue = 0;
    input.value = currentValue;

    let direction = 0;
    if (currentValue > prevValue) direction = 1;
    else if (currentValue < prevValue) direction = -1;

    // Coût d’augmentation : valeur précédente + 1
    let previousCost = prevValue + 1;

    let startXPValue = parseInt(document.getElementById('startXP').textContent);
    let currentXPSpentValue = parseInt(document.getElementById('startXPSpent').textContent);

    // — Blocage si l’augmentation dépasse l’XP disponible
    if (direction === 1 && (startXPValue - currentXPSpentValue) < previousCost) {
        input.value = prevValue;
        return;
    }

    // — Mise à jour XP dépensé
    if (direction === 1) {
        currentXPSpentValue += previousCost;
    } else if (direction === -1) {
        currentXPSpentValue -= previousCost - 1;
        if (currentXPSpentValue < 0) currentXPSpentValue = 0;
    }

    document.getElementById('startXPSpent').textContent = currentXPSpentValue;

    // Mise à jour de tous les affichages d’XP restant
    document.querySelectorAll('.startXPRemaining')
        .forEach(el => el.textContent = startXPValue - currentXPSpentValue);

    // Mise à jour du coût affiché
    document.getElementById('fame_cost').textContent = currentValue + 1;
    
    	//mise a jour du champ xperience
	document.querySelector('input.startXPRemaining').value = startXPValue - currentXPSpentValue;
    

    input.dataset.prevValue = currentValue;
}


/* REPUTATION 
document.addEventListener("DOMContentLoaded", function () {
    const input = document.querySelector("#section-reputation input[type='number']");
    if (!input) return;

    const fameCostLabel = document.getElementById("fame_cost");
    const xpRemainingEls = document.querySelectorAll(".xp_remaining");
    const xpSpentEl = document.getElementById("xp_spent");

    let previousValue = Number(input.dataset.prevValue) || 0;

    // On récupère l'XP initial depuis le premier élément
    let baseXP = Number(xpRemainingEls[0].textContent);

    function updateReputation(event) {
        let currentValue = Number(input.value);
        if (currentValue < 0) currentValue = 0;
        input.value = currentValue;

        // direction : 1 = montée, -1 = descente
        let direction = currentValue > previousValue ? 1 : (currentValue < previousValue ? -1 : 0);

        // coût d'augmentation = ancien niveau + 1
        let previousCost = previousValue + 1;

        let xpSpent = Number(xpSpentEl.textContent);
        let xpRemaining = baseXP - xpSpent;

        // ⛔ Pas assez d’XP pour monter ?
        if (direction === 1 && xpRemaining < previousCost) {
            input.value = previousValue; 
            return;
        }

        // Mise à jour XP dépensée
        if (direction === 1) {
            xpSpent += previousCost;
        } else if (direction === -1) {
            xpSpent -= previousCost - 1;
            if (xpSpent < 0) xpSpent = 0;
        }

        xpSpentEl.textContent = xpSpent;

        // Mise à jour XP restante (tous les éléments)
        xpRemainingEls.forEach(el => {
            el.textContent = baseXP - xpSpent;
        });

        // Mise à jour coût (niveau actuel + 1)
        fameCostLabel.textContent = currentValue + 1;

        previousValue = currentValue;
        input.dataset.prevValue = currentValue;
    }

    input.addEventListener("input", updateReputation);
});
*/



function handleFavourChange(event) {
    const checkbox = event.target;

    
    const cost = Number(checkbox.dataset.cost) || 0;

    // Récupération des valeurs globales XP
    const startXPValue = parseInt(document.getElementById('startXP').textContent);
    let xpSpent = parseInt(document.getElementById('startXPSpent').textContent);
    const xpRemaining = startXPValue - xpSpent;

    // Si on coche ⇒ tenter de consommer le coût
    if (checkbox.checked) {

        // Pas assez d'XP ? On empêche de cocher
        if (xpRemaining < cost) {
            checkbox.checked = false; // rollback
            return;
        }

        xpSpent += cost;

    } else {
        // Si on décoche ⇒ on rend l’XP
        xpSpent -= cost;

        if (xpSpent < 0) xpSpent = 0;
    }

    // Mise à jour de l’XP dépensé
    document.getElementById('startXPSpent').textContent = xpSpent;

    // Mise à jour de tous les affichages XP restant
    document.querySelectorAll('.startXPRemaining')
        .forEach(el => el.textContent = startXPValue - xpSpent);
        
   	//mise a jour du champ xperience
	document.querySelector('input.startXPRemaining').value = startXPValue - xpSpent;
        
}


// -----------------------------------------------------
// Ajout des listeners sur TOUTES les faveurs
// -----------------------------------------------------
document.querySelectorAll('#section-favours input[type="checkbox"]').forEach(cb => {
    cb.addEventListener('change', handleFavourChange);
});




    
    
    document.addEventListener("DOMContentLoaded", function () {

    // IDs uniques : logique
    const disadvantageCounter = document.getElementById("disadvantagePoints");
    const advantageCounter = document.getElementById("advantagePoints");

    // Valeurs internes
    let disadvantagePoints = 0;
    const startingAdvantagePoints = parseInt(advantageCounter.textContent) || 0;
    let advantagePoints = startingAdvantagePoints;

    // Tous les checkbox désavantages
    const checkboxes = document.querySelectorAll(".disadvantage-checkbox");

    checkboxes.forEach(cb => {
        const cost = parseInt(cb.dataset.cost) || 0;

        cb.addEventListener("change", () => {

            // Ajustement points désavantages
            if (cb.checked) {
                disadvantagePoints += cost;
            } else {
                disadvantagePoints -= cost;
            }

            // Mise à jour affichage
            disadvantageCounter.textContent = disadvantagePoints;

            // Ajuste automatiquement les points disponibles pour acheter des avantages
            advantagePoints = startingAdvantagePoints + disadvantagePoints;
            advantageCounter.textContent = advantagePoints;
        });
    });
});





document.addEventListener('DOMContentLoaded', () => {

    const items = document.querySelectorAll('.omen-group-item');

    items.forEach((item) => {

        const toggle = item.querySelector('.omen-toggle');
        const radio  = item.querySelector('.real-radio-omen input[type="radio"]');

        // Quand on ouvre l'accordéon → on coche le radio
        toggle.addEventListener('change', () => {

            if (toggle.checked) {

                // 1) Sélectionner le radio correspondant
                if (radio) {
                    radio.checked = true;
                    radio.dispatchEvent(new Event('change'));
                }

                // 2) Fermer les autres accordéons
                items.forEach((other) => {
                    if (other !== item) {
                        const otherToggle = other.querySelector('.omen-toggle');
                        if (otherToggle) otherToggle.checked = false;
                    }
                });
            }
        });
    });

});


document.addEventListener('DOMContentLoaded', () => {

    const items = document.querySelectorAll('.age-group-item');

    items.forEach((item) => {
        const toggle = item.querySelector('.age-toggle');
        const radio  = item.querySelector('.real-radio-age input[type="radio"]');

        // Quand on ouvre un accordéon → on coche le radio
        toggle.addEventListener('change', () => {

            if (toggle.checked) {

                // Sélectionner le radio individuel
                if (radio) {
                    radio.checked = true;
                    radio.dispatchEvent(new Event('change'));
                }

                // Fermer tous les autres accordéons
                items.forEach((other) => {
                    if (other !== item) {
                        const otherToggle = other.querySelector('.age-toggle');
                        if (otherToggle) otherToggle.checked = false;
                    }
                });
            }
        });
    });
});


document.addEventListener('DOMContentLoaded', () => {

    const items = document.querySelectorAll('.caste-group-item');

    items.forEach((item) => {
        const toggle = item.querySelector('.caste-toggle');
        const radio = item.querySelector('.real-radio input[type="radio"]');

        // Quand on ouvre l’accordéon -> coche le radio
        toggle.addEventListener('change', () => {

            if (toggle.checked) {

                // 1) Cocher le radio correspondant
                if (radio) {
                    radio.checked = true;
                    radio.dispatchEvent(new Event('change'));
                }

                // 2) Fermer tous les autres accordéons
                items.forEach((other) => {
                    if (other !== item) {
                        const t = other.querySelector('.caste-toggle');
                        if (t) t.checked = false;
                    }
                });
            }
        });
    });
});



document.addEventListener('DOMContentLoaded', () => {
    const items = document.querySelectorAll('.caste-group');

    items.forEach((item) => {
        const toggle = item.querySelector('.caste-toggle');
        const radios = item.querySelectorAll('.real-radio input[type="radio"]');

        toggle.addEventListener('change', () => {
            if (toggle.checked) {
                // coche le premier radio du groupe
                if (radios.length > 0) {
                    radios[0].checked = true;
                    radios[0].dispatchEvent(new Event('change', { bubbles: true }));
                }

                // ferme tous les autres accordéons
                items.forEach((other) => {
                    if (other !== item) {
                        const t = other.querySelector('.caste-toggle');
                        if (t) t.checked = false;
                    }
                });
            }
        });
    });
});



document.addEventListener('DOMContentLoaded', () => {
    const valueSelects = document.querySelectorAll(
        '#section-caracteristics select[id$="_value"]'
    );

    if (valueSelects.length === 0) return;

    function updateValues() {
        const selections = Array.from(valueSelects)
            .map(s => s.value)
            .filter(v => v !== "");

        valueSelects.forEach(select => {
            const currentValue = select.value;
            const remaining = selections.filter(v => v !== currentValue);

            const usedCounts = {};
            remaining.forEach(v => usedCounts[v] = (usedCounts[v] || 0) + 1);

            Array.from(select.options).forEach(option => {
                if (option.value === "") {
                    option.disabled = false;
                    return;
                }

                const used = usedCounts[option.value] || 0;

                if (used > 0) {
                    option.disabled = true;
                    usedCounts[option.value]--;
                } else {
                    option.disabled = false;
                }
            });
        });
    }

    updateValues();

    valueSelects.forEach(select => {
        select.addEventListener('change', updateValues);
    });
});



document.addEventListener('DOMContentLoaded', () => {
    const valueSelects = document.querySelectorAll(
        '#section-majorAttributes select[id$="_value"]'
    );

    if (valueSelects.length === 0) return;

    function updateValues() {
        const selections = Array.from(valueSelects)
            .map(s => s.value)
            .filter(v => v !== "");

        valueSelects.forEach(select => {
            const currentValue = select.value;
            const remaining = selections.filter(v => v !== currentValue);

            const usedCounts = {};
            remaining.forEach(v => usedCounts[v] = (usedCounts[v] || 0) + 1);

            Array.from(select.options).forEach(option => {
                if (option.value === "") {
                    option.disabled = false;
                    return;
                }

                const used = usedCounts[option.value] || 0;

                if (used > 0) {
                    option.disabled = true;
                    usedCounts[option.value]--;
                } else {
                    option.disabled = false;
                }
            });
        });
    }

    updateValues();

    valueSelects.forEach(select => {
        select.addEventListener('change', updateValues);
    });
});








// Tendencies
document.addEventListener('DOMContentLoaded', function() {
    const inputs = document.querySelectorAll('#section-tendencies input[type="number"]');
    const maxTotal = 5;

    // Récupération des points libres en attribut data
    const freePointsElement = document.getElementById('free-points');
    let freePoints = parseInt(freePointsElement.dataset.free) || 0;

    function getCurrentSum() {
        let sum = 0;
        inputs.forEach(input => {
            sum += parseInt(input.value) || 0;
        });
        return sum;
    }

    function updateInput(changedInput) {
        const oldSum = getCurrentSum();
        const newVal = parseInt(changedInput.value) || 0;

        // Max autorisé = somme actuelle - valeur avant + freePoints
        const oldVal = parseInt(changedInput.dataset.oldValue) || 0;
        const diff = newVal - oldVal;

        // Si on essaie d'augmenter au-delà des points libres
        if (diff > freePoints) {
            changedInput.value = oldVal + freePoints; // on limite
        }

        const newSum = getCurrentSum();

        // Si la somme dépasse le maxTotal, correction
        if (newSum > maxTotal) {
            const overflow = newSum - maxTotal;
            changedInput.value = (parseInt(changedInput.value) || 0) - overflow;
        }

        // Mettre à jour freePoints après changement réel
        const finalVal = parseInt(changedInput.value) || 0;
        freePoints -= (finalVal - oldVal);
        if (freePoints < 0) freePoints = 0;

        changedInput.dataset.oldValue = finalVal;

        // Mise à jour affichage
        freePointsElement.textContent = "Points libres à répartir : " + freePoints;
    }

    // Initialisation des oldValue
    inputs.forEach(input => {
        input.dataset.oldValue = input.value;
        input.addEventListener('input', function() {
            updateInput(this);
        });
    });
});



const AGE_RULES = {
    "enfants": {
        minor: {
            0: 4,
            1: 0,
        },
        freePoints: 3
    },
    "adolescents": {
        minor: {
            0: 2,
            1: 0,
        },
        freePoints: 4
    },
    "adultes": {
        minor: {
            0: 0,
            1: 0,
        },
        freePoints: 6
    },
    "anciens": {
        minor: {
            0: 0,
            1: 2,
        },
        freePoints: 4
    },
    "venerables": {
        minor: {
            0: 0,
            1: 4,
        },
        freePoints: 3
    }    
};


document.addEventListener("DOMContentLoaded", () => {

    const freeSpan = document.getElementById("free-minor");
    const freeHiddenInput = document.querySelector(
        "input[name='prophecy_edit_figure_sheet_form[freeMinorPoints]']"
    );

    const minorInputs = document.querySelectorAll(
        "input[name^='prophecy_edit_figure_sheet_form[minorAttributes]'][name$='[value]']"
    );

    const ageRadios = document.querySelectorAll(".real-radio-age input[type=radio]");

    // -------------------------------------------------
    // 🔥 CHARGEMENT INITIAL (valeurs venant de Symfony)
    // -------------------------------------------------

    let currentAgeName = null;

    // Trouver l'âge sélectionné au chargement
    ageRadios.forEach(radio => {
        if (radio.checked) {
            const ageLabel = radio.closest(".age-group-item").querySelector(".age-label");
            currentAgeName = ageLabel.innerText.trim();
        }
    });

    const currentRules = AGE_RULES[currentAgeName];

    // Minima à appliquer pour le calcul
    const minAgeValues = currentRules ? currentRules.minor : {};

    // Base totale des points libres
    let baseFree = currentRules ? currentRules.freePoints : parseInt(freeSpan.textContent);

    // Recalcule les points libres réels (si la page est rechargée)
    function computeUsed() {
        let used = 0;
        minorInputs.forEach(inp => {
            const match = inp.name.match(/\[(\d+)]\[value]/);
            if (!match) return;
            const index = match[1];

            const minVal = minAgeValues[index] ?? 0;
            const val = parseInt(inp.value) || 0;

            used += Math.max(0, val - minVal);
        });
        return used;
    }

    // Mise à jour affichage + champ caché
    function updateFree() {
        const used = computeUsed();
        const free = baseFree - used;

        freeSpan.textContent = free;
        freeSpan.style.color = free < 0 ? "red" : "";

        if (freeHiddenInput) {
            freeHiddenInput.value = free;
        }

        return free;
    }

    // ------------------------------
    // Gestion des modifications
    // ------------------------------

    minorInputs.forEach(input => {

        input.addEventListener("input", () => {

            const match = input.name.match(/\[(\d+)]\[value]/);
            if (!match) return;
            const index = match[1];

            const minVal = minAgeValues[index] ?? 0;
            let newVal = parseInt(input.value) || 0;

            // Interdiction de descendre sous le minimum
            if (newVal < minVal) {
                input.value = minVal;
                newVal = minVal;
            }

            // Vérifier qu'on ne dépasse pas les points libres
            const usedAfter = computeUsed();

            if (usedAfter > baseFree) {
                // Rebascule à la valeur minimum acceptable
                input.value = minVal;
            }

            updateFree();
        });
    });

    // ------------------------------
    // Changement d'âge
    // ------------------------------

    ageRadios.forEach(radio => {
        radio.addEventListener("change", () => {

            const ageLabel = radio.closest(".age-group-item").querySelector(".age-label");
            const ageName = ageLabel.innerText.trim();
            const rules = AGE_RULES[ageName];
            if (!rules) return;

            baseFree = rules.freePoints;

            // Mettre à jour les minima d'âge
            Object.assign(minAgeValues, rules.minor);

            // Appliquer les minima
            minorInputs.forEach(input => {
                const match = input.name.match(/\[(\d+)]\[value]/);
                if (!match) return;
                const index = match[1];

                const startVal = rules.minor[index] ?? 0;
                input.value = startVal;
            });

            updateFree();
        });
    });

    // ------------------------------
    // Initialisation finale
    // ------------------------------

    updateFree();
});




/*  A UTILISER LORS DE LA VALIDATION DEFINITIVE DU FORMULAIRE  
document.addEventListener("DOMContentLoaded", () => {
    
    const form = document.getElementById("characterForm");

    form.addEventListener("submit", function (event) {
        event.preventDefault(); // ⛔ On bloque l'envoi pour vérifier d'abord

        if (verifierFormulaire()) {
            console.log("Validation OK → Envoi du formulaire.");
            form.submit(); // ✔ On envoie réellement le formulaire
        } else {
            console.log("Validation KO → Envoi bloqué.");
            // Ici tu peux afficher un message sur la page
        }

    });
});
*/

// 🔍 Fonction de vérification personnalisée
function verifierFormulaire() {

    // Exemple : vérifier que les points ne sont pas négatifs
    const avantageRestants = parseInt(document.getElementById("advantagePoints").textContent);

    if (avantageRestants < 0) {
        alert("Vous n'avez pas assez de points pour valider ce personnage !");
        return false; // ❌ validation échoue → le formulaire ne part pas
    }

    // Exemple : vérifier qu’au moins un désavantage est choisi
    const checkboxes = document.querySelectorAll(".disadvantage-checkbox");
    const auMoinsUnCoche = Array.from(checkboxes).some(cb => cb.checked);

    if (!auMoinsUnCoche) {
        alert("Vous devez sélectionner au moins un désavantage.");
        return false;
    }

    // Si tout est OK :
    return true; // ✔ validation ok → le formulaire sera envoyé
}



{% endblock %}