<form id="projetForm">
    <div class="row">
      <div class="row" id="historiqueDiv">
        <div class="col s12">
          <div class="col s5">
            <select id="idSelect">
              <option value="" selected disabled>Choix d'une ancienne version du projet</option>
            </select>
          </div>
          <div class="col s3">
            <button class="btn" type="button" id="loadHistoriqueBtn" style="margin-top: 10px;">Charger la version sélectionnée</button>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">assignment</i><span style="margin-left: 10px;">Eléments d'appréciation sur l'entreprise :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les éléments d'appréciation sur l'entreprise ci-dessous :</h6>
          </div>
        </div>
  
        <div class="row">
          <div class="col s6 offset-s3" style="display: flex;justify-content: space-evenly;align-items: center;">
            <label>
              <input name="cotisation" id="revisable" type="radio" value="revisable" checked />
              <span>Cotisation révisable</span>
            </label>
            <label>
              <input name="cotisation" id="forfaitaire" type="radio" value="forfaitaire" />
              <span>Cotisation forfaitaire</span>
            </label>
          </div>
        </div>
  
        <div class="row">
          <div class="col s4 offset-s4">
            <label for="chiffreAffaire" class="left">Chiffre d'affaires (€) :</label>
            <input placeholder="1234567" type="text" id="chiffreAffaire">
            <span id="chiffreAffaire-error" class="helper-text red-text"></span>
          </div>
          <div class="col s3 offset-s1">
            <div class="chip-info" id="modCA" style="display: none;">Modulation CA :<br>x 1.00</div>
          </div>
          <div class="col s4 offset-s4" id="rowNbrVehicule" style="display: none;">
            <label for="nbrVehicule" class="left">Nombre de véhicule(s) :<span style="color: red"><b>*</b></span></label>
            <input placeholder="1 ou 2" type="number" id="nbrVehicule" value="1" min="1" max="2">
            <span id="nbrVehicule-error" class="helper-text red-text"></span>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">check_box</i><span style="margin-left: 10px;">Choix des garanties :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les garanties du contrat :</h6>
          </div>
        </div>
  
        <div class="row">
          <div class="col s6 offset-s3" style="display: flex;justify-content: space-evenly;align-items: center;">
            <label>
              <input type="checkbox" class="filled-in" id="checkRCC" checked disabled />
              <span>RC Contractuelle</span>
            </label>
            <label>
              <input type="checkbox" class="filled-in" id="checkRCE"/>
              <span>Autres RC</span>
            </label>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter" style="display: flex;justify-content: space-between;align-items: center;">
            <div style="display: flex;">
              <i class="material-icons">check_box</i><span style="margin-left: 10px;">Activités principales :</span>
            </div>
            <div style="display: flex;align-items: center;gap: 15px;">
              <div id="pourcentageTotal" style="background: white;color: darkblue;padding: 8px 15px;border-radius: 5px;font-weight: bold;font-size: 1.1em;">
                Total : 0%
              </div>
              <button class="rectangle" type="button" id="resetPourcent" style="border: 2.5px solid white !important;">Reset</button>
            </div>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les activités du contrat :</h6>
          </div>
        </div>
        <div class="row" style="display: flex;flex-direction: column;align-items: flex-start;width: 30%;">
          <label id="labelVoiturier">
            <input type="checkbox" class="filled-in" id="checkVoiturier" checked/>
            <span>Voiturier / Loueur</span>
          </label>
          <label id="labelCommissionnaire">
            <input type="checkbox" class="filled-in"  id="checkCommissionnaire"/>
            <span>Commissionnaire de Transport</span>
          </label>
          <label id="labelDemenageur">
            <input type="checkbox" class="filled-in"  id="checkDemenageur"/>
            <span>Déménageur</span>
          </label>
          <label id="labelLogistique">
            <input type="checkbox" class="filled-in"  id="checkLogistique"/>
            <span>Logistique</span>
          </label>
          <label id="labelAutocariste" style="display: none;">
            <input type="checkbox" class="filled-in"  id="checkAutocariste"/>
            <span>Autocariste</span>
          </label>
          <label id="labelAutres">
            <input type="checkbox" class="filled-in"  id="checkAutres"/>
            <span>Autres activites</span>
          </label>
        </div>
  
        <div class="row">
          <div class='col s4' name="actVoiturier/Loueur">
            <div class='card'>
              <div class='card-content'>
                <span><strong style="color: darkblue;">Voiturier / Loueur</strong></span>
                <hr>
                <div class="row">
                  <input type="text" name="selectActVoiturier/Loueur" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
                </div>
                <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                  <input id="pourcentVoiturier/Loueur" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
                  <span><strong style="color: darkblue;">% du chiffre d'affaires</strong></span>
                  <input id="isSetVoiturier/Loueur" value="false" type="hidden">
                </div>
                <hr>
                <span><strong style="color: darkblue;">Taux de base :</strong></span>
                <div style="display: flex; justify-content: space-around;margin-top: 10px;">
                  <div name="RCC" class="chip-info" id="tauxBaseRCCactVoiturier/Loueur">
                    <span>RCC : 0.000 %</span>
                  </div>
                  <div name="RCE" class="chip-info" id="tauxBaseRCEactVoiturier/Loueur" style="display: none;">
                    <span>RCE : 0.000 %</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4' name="actCommissionnaire de Transport" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span><strong style="color: darkblue;">Commissionnaire de Transport</strong></span>
                <hr>
                <div class="row">
                  <input type="text" name="selectActCommissionnaire de Transport" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 100000, 150000, 200000, 300000, 400000</span>
                </div>
                <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                  <input id="pourcentCommissionnaire de Transport" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
                  <span><strong style="color: darkblue;">% du chiffre d'affaires</strong></span>
                  <input id="isSetCommissionnaire de Transport" value="false" type="hidden">
                </div>
                <hr>
                <span><strong style="color: darkblue;">Taux de base :</strong></span>
                <div style="display: flex; justify-content: space-around;margin-top: 10px;">
                  <div name="RCC" class="chip-info" id="tauxBaseRCCactCommissionnaire de Transport">
                    <span>RCC : 0.000 %</span>
                  </div>
                  <div name="RCE" class="chip-info" id="tauxBaseRCEactCommissionnaire de Transport" style="display: none;">
                    <span>RCE : 0.000 %</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4' name="actDéménageur" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span><strong style="color: darkblue;">Déménageur</strong></span>
                <hr>
                <div class="row">
                  <input type="text" name="selectActDéménageur" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
                </div>
                <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                  <input id="pourcentDéménageur" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
                  <span><strong style="color: darkblue;">% du chiffre d'affaires</strong></span>
                  <input id="isSetDéménageur" value="false" type="hidden">
                </div>
                <hr>
                <span><strong style="color: darkblue;">Taux de base :</strong></span>
                <div style="display: flex; justify-content: space-around;margin-top: 10px;">
                  <div name="RCC" class="chip-info" id="tauxBaseRCCactDéménageur">
                    <span>RCC : 0.000 %</span>
                  </div>
                  <div name="RCE" class="chip-info" id="tauxBaseRCEactDéménageur" style="display: none;">
                    <span>RCE : 0.000 %</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4' name="actLogistique" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span><strong style="color: darkblue;">Logistique</strong></span>
                <hr>
                <div class="row">
                  <input type="text" name="selectActLogistique" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
                </div>
                <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                  <input id="pourcentLogistique" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
                  <span><strong style="color: darkblue;">% du chiffre d'affaires</strong></span>
                  <input id="isSetLogistique" value="false" type="hidden">
                </div>
                <hr>
                <span><strong style="color: darkblue;">Taux de base :</strong></span>
                <div style="display: flex; justify-content: space-around;margin-top: 10px;">
                  <div name="RCC" class="chip-info" id="tauxBaseRCCactLogistique">
                    <span>RCC : 0.000 %</span>
                  </div>
                  <div name="RCE" class="chip-info" id="tauxBaseRCEactLogistique" style="display: none;">
                    <span>RCE : 0.000 %</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4' name="actAutocariste" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span><strong style="color: darkblue;">Autocariste</strong></span>
                <hr>
                <div class="row">
                  <input type="text" name="selectActAutocariste" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 25000, 50000, 75000, 100000, 125000, 150000</span>
                </div>
                <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                  <input id="pourcentAutocariste" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
                  <span><strong style="color: darkblue;">% du chiffre d'affaires</strong></span>
                  <input id="isSetAutocariste" value="false" type="hidden">
                </div>
                <hr>
                <span><strong style="color: darkblue;">Taux de base :</strong></span>
                <div style="display: flex; justify-content: space-around;margin-top: 10px;">
                  <div name="RCC" class="chip-info">
                    <span>RCC : 0.000 %</span>
                  </div>
                  <div name="RCE" class="chip-info" style="display: none;">
                    <span>RCE : 0.000 %</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4' name="actAutres activites" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span><strong style="color: darkblue;">Autres activites</strong></span>
                <hr>
                <div class="row">
                  <input type="text" name="selectActAutres activites" placeholder="Capital à assurer (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Exemples : 5000, 10000, 25000, 100000, 150000, 400000</span>
                </div>
                <div class="row" style="display: flex;align-items: center; justify-content: space-around;">
                  <input id="pourcentAutres activites" class="input-pourcent" type="text" placeholder="Ex: 50" title="Appuyez sur Entrée pour valider" style="width: 80px; text-align: center; font-weight: bold; border: 2px solid #3f51b5; border-radius: 4px; padding: 8px;" />
                  <span><strong style="color: darkblue;">% du chiffre d'affaires</strong></span>
                  <input id="isSetAutres activites" value="false" type="hidden">
                </div>
                <hr>
                <span><strong style="color: darkblue;">Taux de base :</strong></span>
                <div style="display: flex; justify-content: space-around;margin-top: 10px;">
                  <div name="RCC" class="chip-info" id="tauxBaseRCCactAutres activites">
                    <span>RCC : 0.000 %</span>
                  </div>
                  <div name="RCE" class="chip-info" id="tauxBaseRCEactAutres activites" style="display: none;">
                    <span>RCE : 0.000 %</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div style="display: flex;justify-content: space-evenly;">
          <div name="RCC" id="primeChapActRCC" class="chip modulo">
            <span>Prime de base RCC : 000 000.00 €</span>
            <br>
            <span>X mod. CA : 000 000.00 €</span>
          </div>
          <div name="RCE" id="primeChapActRCE" class="chip modulo" style="display: none;">
            <span>Prime de base RCE : 000 000.00 €</span>
            <br>
            <span>X mod. CA : 000 000.00 €</span>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">check_box</i><span style="margin-left: 10px;">Activités complémentaires :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les activités complémentaires du contrat :</h6>
          </div>
        </div>
  
        <div class="row card-list">
          <div class='col s4 mrgl0' name="actComplVoiturier/Loueur">
            <div class='card'>
              <div class='card-content'>
                <span>Complément d'activité de : <strong style="color: darkblue;">Voiturier / Loueur</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" checked />
                    <span>Voiturier y compris sous-traitance temporaire</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" checked />
                    <span>Loueur de véhicule industriel avec conducteur</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Coursier en 2 ou 3 roues</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Montage de meuble, électroménager, branchement</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Manutentionnaire - levageur / Loueur de matériel de levage avec opérateur</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Accompagnement de transport exceptionnel</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4 mrgl0' name="actComplCommissionnaire de Transport" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span>Complément d'activité de : <strong style="color: darkblue;">Commissionnaire de Transport</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Commissionnaire de transport multimodal - zone UE</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" checked />
                    <span>Commissionnaire de transport multimodal</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Transitaire</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Représentant en Douane Enregistré</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4 mrgl0' name="actComplDéménageur" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span>Complément d'activité de : <strong style="color: darkblue;">Déménageur</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" checked />
                    <span>Déménageur de particuliers par voie terrestre</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Déménageur de particuliers par voie terrestre - garantie dommage</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Déménageur d'entreprises</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Déménageur interne</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Garde-meubles</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4 mrgl0' name="actComplLogistique" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span>Complément d'activité de : <strong style="color: darkblue;">Logistique</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Entrepositaire - dépositaire</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Gestion de stocks - préparation de commande</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Empoteur</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div style="display: flex;justify-content: space-evenly;">
          <div name="RCC" id="primeChapActComplRCC" class="chip modulo">
            <span>Prime RCC : 000 000.00 €</span>
          </div>
          <div name="RCE" id="primeChapActComplRCE" class="chip modulo" style="display: none;">
            <span>Prime RCE : 000 000.00 €</span>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">local_shipping</i><span style="margin-left: 10px;">Marchandises :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les marchandises du contrat par activités :</h6>
          </div>
        </div>
  
        <div class="row card-list">
          <div class='col s4 mrgl0' name="marVoiturier/Loueur">
            <div class='card'>
              <div class='card-content'>
                <span>Marchandises pour : <strong style="color: darkblue;">Voiturier / Loueur</strong></span>
                <hr>
                
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" checked/>
                    <span>Marchandises ordinaires et assimilées, les marchandises dangereuses dans le respect de la réglementation</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Engins de chantier et engins agricoles</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants dans le cadre d'une activité de déménagement</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Mobiliers usagés – Objets et effets personnels en déménagement</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises périssables sous température dirigée</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Animaux vivants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises en citerne</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Transport de béton</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4 mrgl0' name="marCommissionnaire de Transport" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span>Marchandises pour : <strong style="color: darkblue;">Commissionnaire de Transport</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" checked/>
                    <span>Marchandises ordinaires et assimilées, les marchandises dangereuses dans le respect de la réglementation</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Engins de chantier et engins agricoles</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants dans le cadre d'une activité de déménagement</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Mobiliers usagés – Objets et effets personnels en déménagemen</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises périssables sous température dirigée</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Animaux vivants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises en citerne</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Transport de béton</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4 mrgl0' name="marDéménageur" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span>Marchandises pour : <strong style="color: darkblue;">Déménageur</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Mobiliers en déménagement</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4 mrgl0' name="marLogistique" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span>Marchandise pour : <strong style="color: darkblue;">Logistique</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" checked/>
                    <span>Marchandises ordinaires et assimilées, les marchandises dangereuses dans le respect de la réglementation</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Engins de chantier et engins agricoles</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants dans le cadre d'une activité de déménagement</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Mobiliers usagés – Objets et effets personnels en déménagemen</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises périssables sous température dirigée</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Animaux vivants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises en citerne</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Transport de béton</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4 mrgl0' name="marAutocariste" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span>Marchandise pour : <strong style="color: darkblue;">Autocariste</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" checked/>
                    <span>Marchandises ordinaires et assimilées, les marchandises dangereuses dans le respect de la réglementation</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Engins de chantier et engins agricoles</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants dans le cadre d'une activité de déménagement</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Mobiliers usagés – Objets et effets personnels en déménagemen</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises périssables sous température dirigée</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Animaux vivants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises en citerne</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Transport de béton</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4 mrgl0' name="marAutres activites" style="display: none;">
            <div class='card'>
              <div class='card-content'>
                <span>Marchandise pour : <strong style="color: darkblue;">Autres Activités</strong></span>
                <hr>
                <div style="display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px;">
                  <label>
                    <input type="checkbox" class="filled-in" checked />
                    <span>Marchandises ordinaires et assimilées, les marchandises dangereuses dans le respect de la réglementation</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Engins de chantier et engins agricoles</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Véhicules roulants dans le cadre d'une activité de déménagement</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Mobiliers usagés – Objets et effets personnels en déménagemen</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises périssables sous température dirigée</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Animaux vivants</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Marchandises en citerne</span>
                  </label>
                  <label>
                    <input type="checkbox" class="filled-in" />
                    <span>Transport de béton</span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div style="display: flex;justify-content: space-evenly;">
          <div name="RCC" id="primeChapMarchRCC" class="chip modulo">
            <span>Prime RCC : 000 000.00 €</span>
          </div>
          <div name="RCE" id="primeChapMarchRCE" class="chip modulo" style="display: none;">
            <span>Prime RCE : 000 000.00 €</span>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">public</i><span style="margin-left: 10px;">Informations sur les zones géographiques :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner la territorialité du contrat :</h6>
          </div>
          <div class="row">
            <div class="col s12">
              <div class="col s8 offset-s2">
                <div class="row" style="display: flex; justify-content: space-around; align-items: flex-end;">
                  <label>Zones géographiques :</label>
                  <div>
                    <button class="rectangle" type="button" id="btnMondeEntier">Monde entier</button>
                    <button class="rectangle" type="button" id="btnReset">Reset</button>
                  </div>
                </div>
                <hr>
                <div class="row" style="margin-top: 20px;">
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <label>
                      <input type="checkbox" id="zone1" name="zone1" class="filled-in" checked/>
                      <span id="zone1-text">Zone 1 - France Métropolitaine et pays limitrophes</span>
                    </label>
                    <button class="circle" type="button" id="btnZone1">?</button>
                  </div>
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <label>
                      <input type="checkbox" id="zone2" name="zone2" class="filled-in" />
                      <span id="zone2-text">Zone 2 - Union Européenne</span>
                    </label>
                    <button class="circle" type="button" id="btnZone2">?</button>
                  </div>
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <label>
                      <input type="checkbox" id="zone3" name="zone3" class="filled-in" />
                      <span id="zone3-text">Zone 3 - Autres pays européens sauf Russie et Ukraine</span>
                    </label>
                    <button class="circle" type="button" id="btnZone3">?</button>
                  </div>
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <label>
                      <input type="checkbox" id="zone4" name="zone4" class="filled-in" />
                      <span id="zone4-text">Zone 4 - Pays du Maghreb et Amérique du Nord (USA/Canada/Mexique)</span>
                    </label>
                    <button class="circle" type="button" id="btnZone4">?</button>
                  </div>
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <label>
                      <input type="checkbox" id="zone5" name="zone5" class="filled-in" />
                      <span id="zone5-text">Zone 5 - Amérique Centrale et Sud / Caraïbes, Asie et Océanie</span>
                    </label>
                    <button class="circle" type="button" id="btnZone5">?</button>
                  </div>
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <label>
                      <input type="checkbox" id="zone6" name="zone6" class="filled-in" />
                      <span id="zone6-text">Zone 6 - Afrique hors Maghreb / Proche Orient / Moyen Orient</span>
                    </label>
                    <button class="circle" type="button" id="btnZone6">?</button>
                  </div>
                  <div style="display: flex;align-items: center;justify-content: space-between;">
                    <label>
                      <input type="checkbox" id="zone7" name="zone7" class="filled-in" disabled />
                      <span id="zone7-text">Pays exclus</span>
                    </label>
                    <button class="circle" type="button" id="btnZone7">?</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div style="display: flex;justify-content: space-evenly;">
          <div name="RCC" id="primeChapZonesRCC" class="chip modulo">
            <span>Prime RCC : 000 000.00 €</span>
          </div>
          <div name="RCE" id="primeChapZonesRCE" class="chip modulo" style="display: none;">
            <span>Prime RCE : 000 000.00 €</span>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">check_box</i><span style="margin-left: 10px;">Engagements complémentaires :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les engagements complémentaires du contrat :</h6>
          </div>
        </div>
        <div class="row">
          <div class='col s4'>
            <div class='card'>
              <div class='card-content'>
                <div class="row mrg-b-off">
                  <span style="float: right; color: lightgray; font-weight: bold;">RCC</span>
                  <label><input id="checkDomImmat" type='checkbox' class='filled-in' /><span>Dommages immatériels</span></label>
                </div>
                <div id="selectDomImmat" style="display: none; margin-top: 20px;">
                  <input type="text" id="inputDomImmat" placeholder="Capital (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 15000, 50000, 100000, 150000, 300000, 400000, 500000</span>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4'>
            <div class='card'>
              <div class='card-content'>
                <div class="row mrg-b-off">
                  <span style="float: right; color: lightgray; font-weight: bold;">RCC</span>
                  <label><input id="checkContConf" type='checkbox' class='filled-in' /><span>Contenants confiés</span></label>
                </div>
                <div id="selectContConf" style="display: none; margin-top: 20px;">
                  <input type="text" id="inputContConf" placeholder="Capital (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 25000, 50000, 100000</span>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4'>
            <div class='card'>
              <div class='card-content'>
                <div class="row mrg-b-off">
                  <span style="float: right; color: lightgray; font-weight: bold;">RCC</span>
                  <label><input id="checkDiffInv" type='checkbox' class='filled-in' /><span>Différence inventaire</span></label>
                </div>
                <div id="selectDiffInv" style="display: none; margin-top: 20px;">
                  <input type="text" id="inputDiffInv" placeholder="Capital (€)" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 15000, 30000, 50000</span>
                </div>
              </div>
            </div>
          </div>
        </div>
  
        <div style="display: flex;justify-content: space-evenly;">
          <div name="RCC" id="primeChapEngRCC" class="chip modulo">
            <span id="primeEngValue">Prime RCC : 000 000.00 €</span>
            <div id="primeEngInfos"></div>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">check_box</i><span style="margin-left: 10px;">Garanties additionnelles :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les garanties additionnelles du contrat :</h6>
          </div>
        </div>
        <div class="row mrg-b-off">
          <div class='col s4'>
            <div class='card'>
              <div class='card-content'>
                <div id="rowTPPC" class="row mrg-b-off">
                  <span style="float: right; color: lightgray; font-weight: bold;">RCC</span>
                  <label><input id="checkTPPC" type='checkbox' class='filled-in' /><span>TPPC</span></label>
                </div>
                <div id="selectTPPC" style="display: none; margin-top: 20px;">
                  <input type="text" id="selTPPCcapital" placeholder="Capital (€)" style="text-align: center; font-weight: bold; margin-bottom: 10px;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999; display: block; margin-bottom: 10px;">Ex: 5000, 10000, 15000, 30000</span>
                  <input type="number" id="selTPPCveh" placeholder="Nombre de véhicules" min="1" max="10" style="text-align: center; font-weight: bold;">
                  <span class="helper-text" style="font-size: 0.75em; color: #999;">Ex: 1, 2, 3...</span>
                </div>
              </div>
            </div>
          </div>
  
          <div class='col s4'>
            <div class='card'>
              <div class='card-content'>
                <span style="float: right; color: lightgray; font-weight: bold;">RCC</span>
                <label><input id="checkPJ" type='checkbox' class='filled-in' /><span>Protection juridique</span></label>
              </div>
            </div>
          </div>
        </div>
  
        <div class="row" name="RCE" style="display: none;">
          <div class='col s4'>
            <div class='card'>
              <div class='card-content'>
                <span style="float: right; color: lightgray; font-weight: bold;">RCE</span>
                <label><input id="checkStationLavage" type='checkbox' class='filled-in' /><span>Station de lavage</span></label>
              </div>
            </div>
          </div>
  
          <div class='col s4'>
            <div class='card'>
              <div class='card-content'>
                <span style="float: right; color: lightgray; font-weight: bold;">RCE</span>
                <label><input id="checkGarageInterne" type='checkbox' class='filled-in' /><span>Garage interne</span></label>
              </div>
            </div>
          </div>
  
          <div class='col s4'>
            <div class='card'>
              <div class='card-content'>
                <span style="float: right; color: lightgray; font-weight: bold;">RCE</span>
                <label><input id="checkCSE" type='checkbox' class='filled-in' /><span>Comité Social et Economique</span></label>
              </div>
            </div>
          </div>
        </div>
  
        <div style="display: flex;justify-content: space-evenly;">
          <div name="RCC" id="primeChapGarAddRCC" class="chip modulo">
            <span>Prime RCC : 000 000.00 €</span>
          </div>
          <div name="RCE" id="primeChapGarAddRCE" class="chip modulo" style="display: none;">
            <span>Prime RCE : 000 000.00 €</span>
          </div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">add_alert</i><span style="margin-left: 10px;">Modulation antécédent sinistre
              :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner l'historique de sinistre du contrat :</h6>
          </div>
        </div>
  
        <div class="col s4 offset-s4">
          <label for="sinistre" class="left">Montant de sinistres annuel :</label>
          <input placeholder="1234567" type="text" id="sinistre" />
        </div>
        <div class="col s3 offset-s1">
          <div class="chip-info" id="modSinistre" style="display: none;">Modulation sinistre :<br>x 1.00</div>
        </div>
      </div>
  
      <div class="row">
        <div class="header">
          <div class="chapter">
            <i class="material-icons">credit_card</i><span style="margin-left: 10px;">Propositions tarifaires :</span>
          </div>
          <div class="row">
            <h6 class="red-text text-darken-4">Veuillez sélectionner un tarif adapté :</h6>
          </div>
        </div>
  
        <div class="col s12" style="display: flex;">
          <div class="col s4">
            <div class="franchise-card card border">
              <div class="card-tarif-head" style="background-color:#b71c1c">
                <div class="card-tarif-head-content">
                  <span>Franchise 250 €</span><br>
                  <span class="price" id="priceFr250">0.00 €</span>
                </div>
              </div>
              <div class="card-content no-padding txt-color">
                <p>Prime RCC : <span id="rccFr250">0.00 €</span></p>
                <p>Taux RCC : <span id="tauxRccFr250">0.000 %</span></p>
                <p>Prime RCE : <span id="rceFr250">0.00 €</span></p>
                <p>Taux RCE : <span id="tauxRceFr250">0.000 %</span></p>
                <p>Prime PJ : <span id="pjFr250">0.00 €</span></p>
                <p>Taux global : <span id="tauxGlobalFr250">0.000 %</span></p>
              </div>
              <div class="card-action">
                <button class="btn" name="250">Choisir</button>
              </div>
            </div>
          </div>
  
          <div class="col s4">
            <div class="franchise-card card border">
              <div class="yellow darken-3 white-text card-tarif-head">
                <div class="card-tarif-head-content">
                  <span>Franchise 400 €</span><br>
                  <span class="price" id="priceFr400">0.00 €</span>
                </div>
              </div>
              <div class="card-content no-padding txt-color">
                <p>Prime RCC : <span id="rccFr400">0.00 €</span></p>
                <p>Taux RCC : <span id="tauxRccFr400">0.000 %</span></p>
                <p>Prime RCE : <span id="rceFr400">0.00 €</span></p>
                <p>Taux RCE : <span id="tauxRceFr400">0.000 %</span></p>
                <p>Prime PJ : <span id="pjFr400">0.00 €</span></p>
                <p>Taux global : <span id="tauxGlobalFr400">0.000 %</span></p>
              </div>
              <div class="card-action">
                <button class="btn" name="400">Choisir</button>
              </div>
            </div>
          </div>
  
          <div class="col s4">
            <div class="franchise-card card border">
              <div class="card-tarif-head" style="background-color:#2e7d32">
                <div class="card-tarif-head-content">
                  <span>Franchise 10% avec min 300 € et max 2000 €</span><br>
                  <span class="price" id="priceFr2000">0.00 €</span>
                </div>
              </div>
              <div class="card-content no-padding txt-color">
                <p>Prime RCC : <span id="rccFr2000">0.00 €</span></p>
                <p>Taux RCC : <span id="tauxRccFr2000">0.000 %</span></p>
                <p>Prime RCE : <span id="rceFr2000">0.00 €</span></p>
                <p>Taux RCE : <span id="tauxRceFr2000">0.000 %</span></p>
                <p>Prime PJ : <span id="pjFr2000">0.00 €</span></p>
                <p>Taux global : <span id="tauxGlobalFr2000">0.000 %</span></p>
              </div>
              <div class="card-action">
                <button class="btn" name="mini300">Choisir</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
  
  <!-- MODALS -->
  <!-- Modal pour pays zone 1 -->
  <div id="modalZone1" class="modal">
    <div class="modal-content center-align">
      <div class="row">
        <h5>Zone 1 - France Métropolitaine et pays limitrophes</h5>
        <hr>
      </div>
      <div class="row">
        <img src="/images/zone1.png" alt="Liste zone 1" id="imgZone1" style="width:80%;">
      </div>
    </div>
    <div class="modal-footer">
      <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
  </div>
  
  <!-- Modal pour pays zone 2 -->
  <div id="modalZone2" class="modal">
    <div class="modal-content center-align">
      <div class="row">
        <h5>Zone 2 - Union Européenne</h5>
        <hr>
      </div>
      <div class="row">
        <img src="/images/zone2.png" alt="Liste zone 2" id="imgZone2" style="width:80%;">
      </div>
    </div>
    <div class="modal-footer">
      <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
  </div>
  
  <!-- Modal pour pays zone 3 -->
  <div id="modalZone3" class="modal">
    <div class="modal-content center-align">
      <div class="row">
        <h5>Zone 3 - Autres pays Européens sauf Russie et Ukraine</h5>
        <hr>
      </div>
      <div class="row">
        <img src="/images/zone3.png" alt="Liste zone 3" id="imgZone3" style="width:80%;">
      </div>
    </div>
    <div class="modal-footer">
      <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
  </div>
  
  <!-- Modal pour pays zone 4 -->
  <div id="modalZone4" class="modal">
    <div class="modal-content center-align">
      <div class="row">
        <h5>Zone 4 - Pays du Maghreb et Amérique du Nord ( USA / Canada / Mexique )</h5>
        <hr>
      </div>
      <div class="row">
        <img src="/images/zone4.png" alt="Liste zone 4" id="imgZone4" style="width:80%;">
      </div>
    </div>
    <div class="modal-footer">
      <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
  </div>
  
  <!-- Modal pour pays zone 5 -->
  <div id="modalZone5" class="modal">
    <div class="modal-content center-align">
      <div class="row">
        <h5>Zone 5 - Amérique Centrale et Sud / Caraïbes, Asie et Océanie</h5>
        <hr>
      </div>
      <div class="row">
        <img src="/images/zone5.png" alt="Liste zone 5" id="imgZone5" style="width:80%;">
      </div>
    </div>
    <div class="modal-footer">
      <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
  </div>
  
  <!-- Modal pour pays zone 6 -->
  <div id="modalZone6" class="modal">
    <div class="modal-content center-align">
      <div class="row">
        <h5>Zone 6 - Afrique hors Maghreb / Proche Orient / Moyen Orient</h5>
        <hr>
      </div>
      <div class="row">
        <img src="/images/zone6.png" alt="Liste zone 6" id="imgZone6" style="width:80%;">
      </div>
    </div>
    <div class="modal-footer">
      <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
  </div>
  
  <!-- Modal pour pays zone pays Exclus -->
  <div id="modalZoneExclus" class="modal">
    <div class="modal-content center-align">
      <div class="row">
        <h5>Liste des pays exclus</h5>
        <hr>
      </div>
      <div class="row">
        <img src="/images/zone7.png" alt="Liste zone 7" id="imgZone7" style="width:80%;">
      </div>
    </div>
    <div class="modal-footer">
      <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
  </div>

  <!-- Modal Animaux Vivants -->
    <div id="modalAnimauxVivants" class="modal">
      <div class="modal-content center-align">
        <div class="row">
          <h5 style="color: darkblue;">! Alerte importante !</h5>
          <hr>
        </div>
        <div class="row">
          <h6>Vous devez faire une <strong>demande de dépassement de pouvoirs</strong> pour pouvoir garantir <strong>les animaux vivants</strong> pour des capitaux supérieurs à <strong>200 000 €</strong>.</h6>
        </div>
        <div class="row">
          <h6 class="red-text text-darken-4">Veuillez cliquer sur <strong>« Demande PASS »</strong> pour faire la demande sur l'outil <strong>« PASS »</strong></h6>
          <br>
          <button id="depassementAnimaux" class="btn" style="background-color: darkblue;"
            onclick="window.open('https://ajir.axa-fr.intraxa/secure/RapidBoard.jspa?rapidView=24786&projectKey=ASIARD&quickFilter=47050', '_blank');">
            Demande PASS
          </button>
        </div>
      </div>
      <div class="modal-footer">
        <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
      </div>
    </div>

    <!-- Modal Transport de Béton -->
    <div id="modalTransportBeton" class="modal">
      <div class="modal-content center-align">
        <div class="row">
          <h5 style="color: darkblue;">! Alerte importante !</h5>
          <hr>
        </div>
        <div class="row">
          <h6>Les marchandises <strong>"Transport de béton"</strong> sont exclues des garanties <strong>RCE</strong></h6>
        </div>
      </div>
      <div class="modal-footer">
        <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
      </div>
    </div>

    <!-- Modal Autocariste RCE -->
    <div id="modalAutocaristeRCE" class="modal">
      <div class="modal-content center-align">
        <div class="row">
          <h5 style="color: darkblue;">! Alerte importante !</h5>
          <hr>
        </div>
        <div class="row">
          <h6>Pas d'<strong>Autres RC</strong> pour les activités d'<strong>Autocariste</strong></h6>
        </div>
      </div>
      <div class="modal-footer">
        <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
      </div>
    </div>

    <!-- Modal Tarif Commercial -->
    <div id="modalTarifCom" class="modal">
      <div class="modal-content">
        <div class="mrg row" style="margin-top: 2rem;">
          <p id="tarifRefText" style="font-size: 2rem; color: darkblue; text-align: center;">Tarif de Référence : 0.00€</p>
          <div id="qualiteDiv" style="display: none; text-align: center;">
            <span class="material-icons" id="modalTarifCom-icon" style="font-size: 4rem;">
              mood_bad
            </span>
            <p id="qualitePrime" style="font-size: 1.5rem; font-weight: bold;"></p>
          </div>

          <h6 class="red-text text-darken-4" style="text-align: center;">Veuillez renseigner un tarif commercial</h6>

          <div style="display: flex; justify-content: center; margin-top: 2rem;">
            <div>
              <label for="tarifCom" class="left">Tarif Commercial (€)</label>
              <div class="input-field" style="width: 20rem;">
                <input id="tarifCom" type="number" step="0.01">
                <span id="tarifCom-error" class="helper-text red-text" style="display: none;">
                  Merci d'ajouter un commentaire explicatif pour justifier cette différence ou modifier le tarif commercial
                </span>
              </div>
            </div>
          </div>
        </div>
        <div id="col-commentaire" style="display: none; justify-content: center;">
          <div style="width: 40rem;">
            <label for="commentaire">Commentaire explicatif</label>
            <input id="commentaire" name="commentaire" placeholder="Commentaires" value="">
            <span id="commentaire-error" class="helper-text red-text"></span>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button id="comm-OK" class="waves-effect waves-light btn indigo darken-4">Valider</button>
        <button id="comm-cancel" class="modal-close waves-effect waves-light btn red darken-1">Annuler</button>
      </div>
    </div>