<form id="projetForm">
    <!-- Historique de projet -->
    <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>

    <!-- --------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur l'entreprise    -->
    <!-- --------------------------------------------------- -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">group</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>

        <!-- Assurés additionnels -->
        <div class="row">
            <div class="col s12">
                <div class="col s8 offset-s2">
                    <label>
                        <input type="checkbox" id="additionel" class="filled-in" onchange="toggler(this.id, 'checkAdditionnel')" />
                        <span>Assurés additionnels</span>
                    </label>
                    <div id="checkAdditionnel" style="display:none;">
                        <div class="row">
                            <h6 class="red-text text-darken-4">Veuillez lister les assurés additionnels (Filiales Françaises) :</h6>
                        </div>
                        <div class="card">
                            <table id="empTableAdditionnel">
                                <tr>
                                    <th>Nom</th>
                                    <th>Adresse</th>
                                    <th>Numéro Siret</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <td><input type="text" name="nom" id="nomAdditionnel" placeholder="Non défini" /></td>
                                    <td><input type="text" name="adresse" id="adresseAditionnel" placeholder="Non défini" /></td>
                                    <td><input type="text" name="siret" id="siretAdditionnel" placeholder="Non défini" /></td>
                                    <td><button class="btn" type="button" id="btnAddAdditionnel"><i class="material-icons">add</i></button></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- -------------------------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur les activités et marchandises    -->
    <!-- -------------------------------------------------------------------- -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">reorder</i><span style="margin-left: 10px;">Eléments d'appréciation sur les activités et les marchandises :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez renseigner les éléments d'appréciation sur les activités et les marchandises ci-dessous :</h6>
            </div>
        </div>

        <div class="row">
            <div class="col s12">
                <!-- Activité et marchandises-->
                <div class="col s6 mrg" id="row-activite">
                    <div class="row">
                        <label>Activité assurée :</label>
                        <hr>
                    </div>
                    <div class="input-field" id="col-activite">
                        <i class="material-icons prefix">business</i>
                        <input id="activite" type="text" placeholder="Ex: Fabricant">
                        <span class="helper-text">Activité de l'assuré</span>
                        <span id="activite-error" class="helper-text red-text"></span>
                    </div>
                    <div class="input-field" id="col-typeMar">                            <i class="material-icons prefix">shopping_cart</i>
                        <input id="typeMar" type="text" placeholder="Ex: Matériel informatique">
                        <span class="helper-text">Type de marchandise</span>
                        <span id="typeMar-error" class="helper-text red-text"></span>
                    </div>
                </div>
 

                <!-- Valeur assurée -->
                <div class="col s6 mrg" id="col-valeurAssuree">
                    <div class="row">
                        <label>Valeur assurée :</label>
                        <hr>
                    </div>
                    <div class="left-align" style="display: flex; flex-direction: column">
                        <label>
                            <input name="valeurAssuree" id="valeurAssuree-CG" type="radio" value="cg" checked />
                            <span>Valeur Selon CG (+10%)</span>
                        </label>
                        <label>
                            <input name="valeurAssuree" id="valeurAssuree-degoration" type="radio" value="derogation" />
                            <span>Par dérogation</span>
                        </label>

                        <div id="row-valeurAssureeBase" class="left-align" style="display: none; flex-direction: column;">
                            <div class="subdiv">
                                <span>Sur la base :</span>
                                <hr class="form" />
                            </div>
                            <label>
                                <input type="checkbox" id="valeurAssureeBase-prix" name="valeurAssureeBase" class="filled-in" value="prix" />
                                <span id="valeurAssureeBase-prix-text">du prix de revient</span>
                            </label>
                            <label>
                                <input type="checkbox" id="valeurAssureeBase-achat" name="valeurAssureeBase" class="filled-in" value="achat" />
                                <span id="valeurAssureeBase-achat-text">de la facture d'achat</span>
                            </label>
                            <label>
                                <input type="checkbox" id="valeurAssureeBase-vente" name="valeurAssureeBase" class="filled-in" value="vente" />
                                <span id="valeurAssureeBase-vente-text">de la facture de vente</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- -------------------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur les zones géographiques    -->
    <!-- -------------------------------------------------------------- -->
    <div class="row" id="row-zonesGeo">
        <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>

        <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" />
                                <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>

    <!-- --------------------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur les moyens de transports    -->
    <!-- --------------------------------------------------------------- -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">directions_car</i><span style="margin-left: 10px;">Informations sur les transports :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez renseigner le ou les moyens de transport :</h6>
            </div>
        </div>

        <div class="row" id="row-moyenTransport" style="max-width: 40rem;">
            <div class="row">
                <label>Moyen de Transport - Garantie</label>
                <hr>
            </div>
                
            <table class="highlight centered" id="moyenTransport">
                <thead>
                    <tr>
                        <th>Type de Transport</th>
                        <th>Tous Risques</th>
                        <th>Évènements Majeurs</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td class="typeTransport"><i class="material-icons" aria-hidden="true">time_to_leave</i> Terrestre</td>
                        <td>
                            <label>
                                <input type="checkbox" id="terrestre-tousRisques" name="terrestre" value="tousRisques" class="filled-in" />
                                <span id="terrestre-tousRisques-text"></span>
                            </label>
                        </td>
                        <td>
                            <label>
                                <input type="checkbox" id="terrestre-eventMaj" name="terrestre" value="eventMaj" class="filled-in" />
                                <span id="terrestre-eventMaj-text"></span>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td class="typeTransport"><i class="material-icons" aria-hidden="true">directions_boat</i> Maritime</td>
                        <td>
                            <label>
                                <input type="checkbox" id="maritime-tousRisques" name="maritime" value="tousRisques" class="filled-in" />
                                <span id="maritime-tousRisques-text"></span>
                            </label>
                        </td>
                        <td>
                            <label>
                                <input type="checkbox" id="maritime-eventMaj" name="maritime" value="eventMaj" class="filled-in" />
                                <span id="maritime-eventMaj-text"></span>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td class="typeTransport"><i class="material-icons" aria-hidden="true">flight</i> Aérien</td>
                        <td>
                            <label>
                                <input type="checkbox" id="aerien-tousRisques" name="aerien" value="tousRisques" class="filled-in" />
                                <span id="aerien-tousRisques-text"></span>
                            </label>
                        </td>
                        <td>
                            <label>
                                <input type="checkbox" id="aerien-eventMaj" name="aerien" value="eventMaj" class="filled-in" />
                                <span id="aerien-eventMaj-text"></span>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td class="typeTransport"><i class="material-icons" aria-hidden="true">email</i> Postal</td>
                        <td>
                            <label>
                                <input type="checkbox" id="postal-tousRisques" name="postal" value="tousRisques" class="filled-in" />
                                <span id="postal-tousRisques-text"></span>
                            </label>
                        </td>
                        <td>
                            <label>
                                <input type="checkbox" id="postal-eventMaj" name="postal" value="eventMaj" class="filled-in" />
                                <span id="postal-eventMaj-text"></span>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td class="typeTransport"><i class="material-icons">water_drop</i> Fluvial</td>
                        <td>
                            <label>
                                <input type="checkbox" id="fluvial-tousRisques" name="fluvial" value="tousRisques" class="filled-in" />
                                <span id="fluvial-tousRisques-text"></span>
                            </label>
                        </td>
                        <td>
                            <label>
                                <input type="checkbox" id="fluvial-eventMaj" name="fluvial" value="eventMaj" class="filled-in" />
                                <span id="fluvial-eventMaj-text"></span>
                            </label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- ---------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur les garanties    -->
    <!-- ---------------------------------------------------- -->
    <div class="row" id="row-infosgaranties">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">assignment</i><span style="margin-left: 10px;">Informations sur les garanties :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez remplir les extensions de garantie / garanties optionnelles <u>si il y en a :</u></h6>
            </div>
        </div>

        <div class="row">
            <div class="col s12">
                <div class="col s6 mrg">
                    <!-- Garanties de base -->
                    <div class="row">
                        <div class="row">
                            <label>Garantie de base :</label>
                            <hr>
                        </div>
                        <div class="valign-wrapper">
                            <label>
                                <input type="checkbox" id="transportsConfies" name="transportsConfies" value="transportsConfies" class="filled-in" checked disabled />
                                <span id="transportsConfies-text"> Transports confiés</span>
                            </label>
                        </div>
                    </div>

                    <!-- Extensions de garanties -->
                    <div class="row">
                        <div class="row">
                            <label>Extensions de garantie :</label>
                            <hr>
                        </div>
                        <div class="row" id="row-TPPC">
                            <div class="left-align col s7">
                                <label>
                                    <input type="checkbox" id="TPPC" name="TPPC" value="TPPC" class="filled-in" />
                                    <span id="TPPC-text"> Transports pour propre compte</span>
                                </label>
                            </div>

                            <div class="left-align col s5" id="col-typetppc" style="display: none;">
                                <span>Type TPPC :</span>
                                <hr class="form" />

                                <label>
                                    <input name="typeTPPC" id="tousRisques" type="radio" value="tousRisques" checked />
                                    <span>Tous Risques</span>
                                </label>
                                <label>
                                    <input name="typeTPPC" id="flotteND" type="radio" value="flotteND" />
                                    <span>Flotte Non Dénommée</span>
                                </label>
                            </div>
                        </div>

                        <div class="row" id="row-marExpo">
                            <div class="left-align col s7">
                                <label>
                                    <input type="checkbox" id="marchandise-exposition" name="marchandise-exposition" value="marchandiseExposition" class="filled-in" />
                                    <span id="marchandise-exposition"> Marchandises en exposition</span>
                                </label>
                            </div>

                            <div class="left-align col s5" id="col-numMarExpo" style="display: none;">
                                <label for="marExpo">Nombre d'expositions : </label>
                                <input id="marExpo" value="2" />
                                <span id="marExpo-error" class="helper-text red-text"></span>
                            </div>
                        </div>
                    </div>

                    <!-- Risques de transport -->
                    <div class="row" id="row-risqueTransport">
                        <div class="row">
                            <label>Risques de transport garantis :</label>
                            <hr>
                        </div>

                        <div>
                            <div class="chip select-chip" id="achat-chip">Contrats d'achat</div>
                            <div class="chip select-chip" id="vente-chip">Contrats de vente</div>
                            <div class="chip select-chip" id="sav-chip">Opérations SAV</div>
                            <div class="chip select-chip" id="demo-chip">Démonstrations</div>
                            <div class="chip select-chip" id="transfert-chip">Transferts inter-usines</div>
                        </div>

                        <div class="input-field col s12">
                            <select multiple id="risqueTransport" name="risqueTransport">
                                <option value="placeholder" disabled selected>Les expéditions effectuées en vertu :</option>
                                <option value="achat">des contrats d'achat</option>
                                <option value="vente">des contrats de vente</option>
                                <option value="sav">des opérations SAV</option>
                                <option value="demo">des démonstrations</option>
                                <option value="transfert">des transferts inter-usines</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Risques de guerre -->
                <div class="col s6 mrg">
                    <div class="row">
                        <div class="row">
                            <label>Risque de guerre :</label>
                            <hr>
                        </div>
                        <div class="left-align" style="display: flex; flex-direction: column;">
                            <label id="row-rg-demande">
                                <input name="risqueGuerre" id="rg-demande" type="radio" value="demande" checked />
                                <span>RG sur demande préalable</span>
                            </label>
                            <label id="row-rg-auto">
                                <input name="risqueGuerre" id="rg-auto" type="radio" value="auto" />
                                <span>RG automatique</span>
                            </label>
                            <label id="row-rg-no" style="display : none">
                                <input name="risqueGuerre" id="rg-no" type="radio" value="" />
                                <span>Pas de RG</span>
                            </label>
                        </div>
                    </div>

                    <div class="row" id="row-typeGarantieRG" style="display: none;">
                        <div class="row">
                            <label>Type de garantie risque de guerre :</label>
                            <hr>
                        </div>
                        <div class="left-align" style="display: flex; flex-direction: column;">
                            <label>
                                <input name="typeGarantieRG" id="typeGarantieRG-demande" type="radio" value="etendue" checked />
                                <span>Garantie étendue</span>
                            </label>
                            <label>
                                <input name="typeGarantieRG" id="typeGarantieRG-waterborne" type="radio" value="waterborne" />
                                <span>Garantie waterborne</span>
                            </label>
                        </div>
                    </div>

                    <!-- Garanties optionnelles -->
                    <div class="row">
                        <div class="row">
                            <label>Garanties optionnelles :</label>
                            <hr>
                        </div>

                        <div>
                            <div class="chip select-chip" id="auto-chip">Véhicules automobiles</div>
                            <div class="chip select-chip" id="emballage-chip">Assurance emballages</div>
                            <div class="chip select-chip" id="etiquette-chip">Etiquettes</div>
                            <div class="chip select-chip" id="temperature-chip">Température dirigée</div>
                            <div class="chip select-chip" id="marque-chip">Protection de la marque</div>
                        </div>

                        <div class="input-field col s12">
                            <select multiple id="garantieOpt" name="garantieOpt">
                                <option value="placeholder" disabled selected>Les expéditions effectuées en vertu :</option>
                                <option value="auto">Véhicules automobiles</option>
                                <option value="emballage">Assurance emballages</option>
                                <option value="etiquette">Etiquettes</option>
                                <option value="temperature">Température dirigée</option>
                                <option value="marque">Protection de la marque</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- -------------------------------------------------- -->
    <!-- Nouvelle section : Informations sur le contrats    -->
    <!-- -------------------------------------------------- -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">settings</i><span style="margin-left: 10px;">Informations sur le contrat :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez renseigner les informations liées au contrat :</h6>
            </div>
        </div>

        <div class="row">
            <!-- Colonne Fractionnement -->
            <div class="row" id="row-fractionnement" style="max-width: 35rem;">
                <div class="row">
                    <label>Fractionnement :</label>
                    <hr>
                </div>
                <label>
                    <input name="fract" id="mensuel" type="radio" value="mensuel" checked />
                    <span>Mensuel</span>
                </label>
                <label>
                    <input name="fract" id="trimestriel" type="radio" value="trimestriel" />
                    <span>Trimestriel</span>
                </label>
                <label>
                    <input name="fract" id="semestriel" type="radio" value="semestriel" />
                    <span>Semestriel</span>
                </label>
                <label>
                    <input name="fract" id="annuel" type="radio" value="annuel" />
                    <span>Annuel</span>
                </label>
                <input id="cotFraisHT" type="number" disabled style="display: none;">
            </div>
            <br>

            <div class="row">
                <div class="col s12">
                    <!-- dates du contrat -->
                    <div class="col s6 mrg">
                        <div class="row">
                            <div style="display: flex;justify-content: space-evenly;align-items: center;">
                                <label>Dates du contrat :</label>
                                <button class="circle" type="button" id="btnModalDate">?</button>
                            </div>
                            <hr>
                        </div>
                        <div id="rowDateEffet" class="input-field">
                            <div class="col s11">
                                <input id="dateEffet" type="text" placeholder="jj/mm/aaaa">
                                <span class="helper-text">Date d'effet</span>
                                <span id="dateEffet-error" class="helper-text red-text"></span>
                            </div>
                            <div class="col s1">
                                <button class="circle-null" type="button" id="btnNullDateDebut">X</button>
                            </div>
                        </div>
                        <div id="rowDateEcheance" class="input-field">
                            <div class="col s11">
                                <input id="dateEcheance" type="text" placeholder="jj/mm">
                                <span class="helper-text">Date d'échéance</span>
                                <span id="dateEcheance-error" class="helper-text red-text"></span>
                            </div>
                            <div class="col s1">
                                <button class="circle-null" type="button" id="btnNullDateEcheance">X</button>
                            </div>
                        </div>
                        <div id="rowDateFin" class="input-field" style="display:none;">
                            <div class="col s11">
                                <input id="dateFin" type="text" placeholder="jj/mm/aaaa">
                                <span class="helper-text">Date de fin</span>
                                <span id="dateFin-error" class="helper-text red-text"></span>
                            </div>
                            <div class="col s1">
                                <button class="circle-null" type="button" id="btnNullDateFin">x</button>
                            </div>
                        </div>
                
                        <!-- Détails du voyage en temporaire -->
                        <div id="row-detailsVoyage" style="display: none">
                            <div class="subdiv">
                                <label>Détails du voyage :</label>
                                <hr>
                            </div>
                            
                            <div class="input-field">
                                <i class="material-icons prefix">flight_takeoff</i>
                                <input id="depart" type="text" class="validate">
                                <span class="helper-text">Lieu de départ</span>
                            </div>
                            
                            <div class="input-field">
                                <i class="material-icons prefix">flight_land</i>
                                <input id="arrivee" type="text" class="validate">
                                <span class="helper-text">Lieu d'arrivée</span>
                            </div>
                        </div>
                    </div>

                    <!-- extensions spécifiques -->
                    <div class="col s6 mrg">
                        <div class="row">
                            <div class="subdiv">
                                <label>Extensions :</label>
                                <hr>
                            </div>
                            <div class="row" id="row-programmeInternational">
                                <span>Programme international</span>
                                <hr class="form">
                                <div class="switch">
                                    <label>
                                        Non
                                        <input type="checkbox" id="programmeInternationale">
                                        <span class="lever"></span>
                                        Oui
                                    </label>
                                </div>
                            </div>
                            <div class="row" id="row-participationResultats">
                                <span>Participation aux résultats</span>
                                <hr class="form">
                                <div class="switch">
                                    <label>
                                        Non
                                        <input type="checkbox" id="participationResultat">
                                        <span class="lever"></span>
                                        Oui
                                    </label>
                                </div>
                            </div>

                            <div class="row" id="row-coassurance">
                                <span>Coassurance</span>
                                <hr class="form">
                                <div class="switch">
                                    <label>
                                        Non
                                        <input type="checkbox" id="coassurance">
                                        <span class="lever"></span>
                                        Oui
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ------------------------------------------------------ -->
    <!-- Nouvelle section : Informations sur les cotisations    -->
    <!-- ------------------------------------------------------ -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">credit_card</i><span style="margin-left: 10px;">Informations sur les cotisations :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez renseigner les informations sur la cotisation :</h6>
            </div>
        </div>
        <hr class="form" />

        <!-- cotisations de base -->
        <div class="flex-adaptable">
            <div class="mrg" id="colTypeContrat" style="max-width: 30rem;">
                <div class="row">
                    <label>Type de contrat :</label>
                    <hr>
                </div>

                <label>
                    <input name="typeContrat" id="typeContrat-chiffreAffaires" type="radio" value="chiffreAffaires" checked />
                    <span>Cotisation révisable</span>
                </label>
                <label>
                    <input name="typeContrat" id="typeContrat-avisAliments" type="radio" value="avisAliments" />
                    <span>Cotisation sur avis d'aliments</span>
                </label>
            </div>
            <div class="mrg" id="colCA" style="max-width: 30rem;">
                <div class="row">
                    <label>Chiffre d'affaires :</label>
                    <hr>
                </div>
                <div class="input-field">
                    <i class="material-icons prefix">trending_up</i>
                    <input id="CA" type="text" placeholder="100000">
                    <span class="helper-text">Chiffre d'affaires</span>
                    <span id="CA-error" class="helper-text red-text"></span>
                </div>
            </div>
            <div class="mrg" id="colCotMini" style="max-width: 30rem;">
                <div class="row">
                    <label>Cotisation minimale irréductible :</label>
                    <hr>
                </div>
                <div class="input-field">
                    <i class="material-icons prefix">euro_symbol</i>
                    <input id="cotisationIrreductible" type="text" placeholder="200">
                    <span class="helper-text">Cotisation minimale irréductible</span>
                    <span id="cotisationIrreductible-error" class="helper-text red-text"></span>
                </div>
            </div>
        </div>

        <div class="flex-adaptable table-adaptable">
            <!-- Tableaux de capitaux couverts -->
            <div class="mrg" id="row-capitauxCouverts">
                <div class="row">
                    <label>Capitaux couverts :</label>
                    <hr>
                </div>
                <div class="card">
                    <table id="empTableCapitauxCouverts">
                        <tbody>
                            <tr>
                                <td>Capital maximum par expédition ou évènement (€)</td>
                                <td>
                                    <input type="text" name="capitalMax" id="capitalMax" placeholder="Ex: 100 (en €)" />
                                    <span id="capitalMax-error" class="helper-text red-text"></span>
                                </td>
                            </tr>
                            <tr id="row-capitalColis">
                                <td>Capital par colis (€)</td>
                                <td>
                                    <input type="text" name="capitalColis" id="capitalColis" placeholder="Ex: 1000 (en €)" />
                                    <span id="capitalColis-error" class="helper-text red-text"></span>
                                </td>
                            </tr>
                            <tr id="row-capitalExped">
                                <td>Capital par expédition (€)</td>
                                <td>
                                    <input type="text" name="capitalExped" id="capitalExped" placeholder="Ex: 15000 (en €)" />
                                    <span id="capitalExped-error" class="helper-text red-text"></span>
                                </td>
                            </tr>
                            <tr id="row-capitalTPPC" style="display: none">
                                <td>Capital TPPC (€)</td>
                                <td>
                                    <input type="text" name="capitalTPPC" id="capitalTPPC" placeholder="Ex: 200 (en €)" />
                                    <span id="capitalTPPC-error" class="helper-text red-text"></span>
                                </td>
                            </tr>
                            <tr id="row-capitalExpo" style="display: none">
                                <td>Capital Exposition (€)</td>
                                <td>
                                    <input type="text" name="capitalExpo" id="capitalExpo" placeholder="Ex: 500 (en €)" />
                                    <span id="capitalExpo-error" class="helper-text red-text"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Tableau de franchises -->
            <div class="mrg" id="row-franchise">
                <div class="row">
                    <label>Franchises :</label>
                    <hr>
                </div>
                <div class="card">
                    <table id="empTableFranchises">
                        <tbody>
                            <tr>
                                <td>Franchise transports confiés (€)</td>
                                <td>
                                    <input type="text" name="franchiseTransport" id="franchiseTransport" placeholder="Ex: 0 (en €)" value="0" />
                                    <span id="franchiseTransport-error" class="helper-text red-text"></span>
                                </td>
                            </tr>
                            <tr id="row-franchiseTPPC" style="display: none">
                                <td>Franchise TPPC (€)</td>
                                <td>
                                    <input type="text" name="franchiseTPPC" id="franchiseTPPC" placeholder="Ex: 300 (en €)" value="300" />
                                    <span id="franchiseTPPC-error" class="helper-text red-text"></span>
                                </td>
                            </tr>

                            <tr id="row-franchiseExpo" style="display: none">
                                <td>Franchise Expo (€)</td>
                                <td>
                                    <input type="text" name="franchiseExpo" id="franchiseExpo" placeholder="Ex: 1500 (en €)" value="1500" />
                                    <span id="franchiseExpo-error" class="helper-text red-text"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Tableau d'ajustement -->
            <div class="mrg" id="colTauxAjustement">
                <div class="row">
                    <label>Taux d'ajustement :</label>
                    <hr>
                </div>
                <div class="card">
                    <table id="empTableTaux">
                        <tbody>
                            <tr id="row-tauxCotRO">
                                <td>Taux de cotisation RO (%)</td>
                                <td>
                                    <input type="text" name="tauxCotRO" id="tauxCotRO" placeholder="Ex: 0,05 (en %)" />
                                    <span id="tauxCotRO-error" class="helper-text red-text"></span>
                                </td>
                            </tr>

                            <tr style="display: none" id="row-tauxCotRG">
                                <td>Taux de cotisation RG (%)</td>
                                <td>
                                    <input type="text" name="tauxCotRG" id="tauxCotRG" placeholder="Ex: 0,05 (en %)" />
                                    <span id="tauxCotRG-error" class="helper-text red-text"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Tableau des cotisations -->
            <div class="mrg" id="colDetailCot">
                <div class="row">
                    <label>Détail des cotisations :</label>
                    <hr>
                </div>
                <div class="card">
                    <table id="empTableCotisation">
                        <thead>
                            <tr>
                                <th>Garanties</th>
                                <th>HT</th>
                                <th>TTC</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style="display: none" id="row-cotProvRO">
                                <td>Cotisation Provisionnelle RO (€)</td>
                                <td colspan="2">
                                    <input type="text" name="cotProvRO" id="cotProvRO" placeholder="Ex: 539,90 (en €)" />
                                    <span id="cotProvRO-error" class="helper-text red-text"></span>
                                </td>
                            </tr>

                            <tr style="display: none" id="row-cotProvRG">
                                <td>Cotisation Provisionnelle RG (€)</td>
                                <td colspan="2">
                                    <input type="text" name="cotProvRG" id="cotProvRG" placeholder="Ex: 539,90 (en €)" />
                                    <span id="cotProvRG-error" class="helper-text red-text"></span>
                                </td>
                            </tr>


                            <tr id="row-cotRO" style="display: none">
                                <td>Cotisation sur risques ordinaires (€)</td>

                                <td colspan="2">
                                    <input type="text" name="cotRO" id="cotRO" placeholder="Ex: 539,90 (en €)" />
                                    <span id="cotRO-error" class="helper-text red-text"></span>
                                </td>
                            </tr>

                            <tr id="row-cotRG" style="display: none">
                                <td>Cotisation sur risques de guerre (€)</td>
                                <td colspan="2">
                                    <input type="text" name="cotRG" id="cotRG" placeholder="Ex: 539,90 (en €)" />
                                    <span id="cotRG-error" class="helper-text red-text"></span>
                                </td>
                            </tr>

                            <tr id="row-cotComptant" style="display: none">
                                <td>Cotisation comptant (€)</td>

                                <td colspan="2">
                                    <input type="text" name="cotComptant" id="cotComptant" placeholder="Ex: 539,90 (en €)" />
                                    <span id="cotComptant-error" class="helper-text red-text"></span>
                                </td>
                            </tr>

                            <tr id="row-cotAnnuelle" style="display: none">
                                <td>Cotisation Annuelle (€)</td>
                                <td>
                                    <input type="text" value="" name="cotAnnuelleHT" id="cotAnnuelleHT" placeholder="Ex: 539,90 (en €)" />
                                    <span id="cotAnnuelleHT-error" class="helper-text red-text"></span>
                                </td>
                                <td>
                                    <input type="text" value="" name="cotAnnuelle" id="cotAnnuelle" placeholder="Ex: 539,90 (en €)" />
                                    <span id="cotAnnuelle-error" class="helper-text red-text"></span>
                                </td>
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- ------------------------------------------- -->
    <!-- Nouvelle section : Génération et sauvegarde -->
    <!-- ------------------------------------------- -->
    <div class="row">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">save</i><span style="margin-left: 10px;">Enregistrer et poursuivre le parcours :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez enregistrer toutes modifications sur le formulaire :</h6>
            </div>
        </div>
        <button class="btn" type="submit" id="projetFormBtn">Enregistrer et poursuivre le parcours</button>
    </div>
</form>

<!-- --------------------------- -->
<!-- Début de la liste des Modal -->
<!-- --------------------------- -->
<!-- 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 6 -->
<div id="modalDate" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h5>Format de saisie date</h5>
            <hr>
        </div>
        <div class="row">
            <h6 class="red-text text-darken-4">Le format de donnée DATE doit respecter cette convention :</h6>
            <p class="indigo-text text-darken-4">- Pour date d'effet et date de fin <b>JJ/MM/AAAA</b><br /></p>
            <p class="indigo-text text-darken-4">- Pour date d'échéance et date de fin <b>JJ/MM</b><br /></p>
        </div>
        <div class="row">
            <h6>Pour des raisons de qualité de la donnée, aucun autre format ne sera possible, vous pouvez toutefois utiliser le bouton :</h6>
            <br>
            <center>
                <button class="circle-null" type="button">X</button>
            </center>
            <br>
            <h6>Vos CP seront alors renseignées avec la mention "A PRECISER" à la place de ladite DATE.</h6>
        </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>Demande PASS animaux vivants</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></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 »</h6>
            <br>
            <button id="depassement" class="btn" 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 DIFFERENCE D'INVENTAIRE -->
<div id="modalDiffInventaire" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h5>Différence d'inventaire</h5>
            <hr>
        </div>
        <div class="row">
            <h6>Attention la clause "Différence d'inventaire" est soumise à validation <strong>Manager</strong> et <strong>Direction Technique</strong> !</h6>
        </div>
    </div>
    <div class="modal-footer">
        <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
    </div>
</div>