<form id="tarifFormFAC">
    <h5>
        Formulaire de tarification FAC
    </h5>

    <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 tarif</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="header">
        <div class="chapter">
            <i class="material-icons">group</i><span style="margin-left: 10px;">Elements d'appréciation sur l'entreprise
                :</span>
        </div>

        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les informations sur l'entreprise ci-dessous :</h6>
        </div>
    </div>

    <div class="mrg row" id="row-Elements">
        <div id="row-typeFlux">
            <div class="subdiv">
                <label>Type de flux :</label>
            </div>

            <div class="row">
                <label>
                    <input name="typeFlux" id="global" type="radio" value="global" checked />
                    <span>Flux au global sur CA</span>
                </label>
                <label>
                    <input name="typeFlux" id="detailles" type="radio" value="detailles" />
                    <span>Flux détaillés</span>
                </label>
            </div>

            <div id="row-fluxDetailles"
                style="display: flex; justify-content: space-evenly;margin : 10px 0px 20px 0px;">
                <label>
                    <input name="fluxDetailles" class="filled-in" id="achats" type="checkbox" value="achats" checked />
                    <span>Achats</span>
                </label>
                <label>
                    <input name="fluxDetailles" class="filled-in" id="ventes" type="checkbox" value="ventes" />
                    <span>Ventes</span>
                </label>
                <label>
                    <input name="fluxDetailles" class="filled-in" id="intersites" type="checkbox" value="intersites" />
                    <span>Intersites, flux vers sous traitants & flux SAV</span>
                </label>
            </div>
        </div>

        <div class="grille-flex" id="col-ca">
            <div>
                <label for="ca" class="left">Chiffre d'affaires</label>
                <div class="input-field" style="margin : 0">
                    <input id="ca" type="number" placeholder="En (€)">
                </div>
                <span id="ca-error" class="helper-text red-text"></span>
            </div>
        </div>

    </div>

    <div class="header">
        <div class="chapter">
            <i class="material-icons">reorder</i><span style="margin-left: 10px;">Informations sur la police :</span>
        </div>

        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner les informations sur la police :</h6>
        </div>
    </div>

    <div class="grille-flex" id="row-police">
        <div id="col-typePolice">
            <div class="row">
                <label>Type de Police :</label>
                <hr class="underline">
            </div>
            <select id="police">
                <option disabled selected value="">Selectionner le type de police</option>
                <option value="ca">Police au CA</option>
                <option value="national">Police au voyage National</option>
                <option value="international">Police au voyage international</option>
            </select>
            <div class="chip modulo" id="chip-modulo-police" style="display: none; margin-top: 10px;">
                Mod. police : x2
            </div>

            <div class="chip step" id="chip-step-police" style="display: none; margin-top: 10px;">
                Prime :
            </div>
        </div>
    </div>

    <div class="header">
        <div class="chapter">
            <i class="material-icons">reorder</i><span style="margin-left: 10px;">Activité de l'entreprise :</span>
        </div>

        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner l’activité de l’entreprise :</h6>
        </div>
    </div>

    <div class="grille-flex" id="row-activite">
        <div id="col-activite">
            <label for="activite" class="left">Activité de l'entreprise</label>
            <div class="input-field" style="margin : 0">
                <input id="activite" class="autocomplete activite-autocomplete" type="text" placeholder="Ex: Fabricant">
            </div>
            <span id="activite-error" class="helper-text red-text"></span>
            <div class="chip modulo " id="chip-modulo-activite" style="display: none;">
                Mod. activité : x2
            </div>

            <div class="chip step" id="chip-step-activite" style="display: none; margin-top: 10px;">
                Prime :
            </div>
        </div>
    </div>

    <div id="div-infoMarchandises">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">group</i><span style="margin-left: 10px;">Informations sur les marchandises
                    :</span>
            </div>

            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez renseigner les informations sur la marchandise :</h6>
            </div>
        </div>

        <div class="grille-flex" id="row-marchandises">

            <div id="col-marchandise" style="display: flex;">
                <div style="width : 100%">
                    <label for="marchandise" class="left">Marchandise Principale</label>
                    <div class="input-field" style="margin : 0">
                        <input id="marchandise" class="autocomplete natureMar-autocomplete" type="text"
                            placeholder="Ex: Fabricant">
                    </div>
                    <span id="marchandise-error" class="helper-text red-text"></span>
                    <div class="chip modulo " id="chip-modulo-marchandise" style="display: none;">
                        Taux de Base : 2
                    </div>
                </div>
                <div>
                    <button class="circle" type="button" name="marchandiseInfos">?</button>
                </div>
            </div>
        </div>
        <div class="grille-flex" id="row-montant">
            <div id="col-montant">
                <label for="montant" class="left">Montant à Garantir</label>
                <div class="input-field" style="margin : 0">
                    <input id="montant" type="number" placeholder="En (€)">
                </div>
                <span id="montant-error" class="helper-text red-text"></span>
                <div class="chip modulo " id="chip-modulo-montant" style="display: none;">
                    Mod. Montant : x2
                </div>
            </div>
        </div>
        <div class="chip step" id="chip-step-marchandises" style="display: none;">
            Prime :
        </div>
    </div>

    <div id="div-flux">
        <div class="header">
            <div class="chapter">
                <i class="material-icons">input</i><span style="margin-left: 10px;">Informations sur les flux
                    :</span>
            </div>
            <div class="row">
                <h6 class="red-text text-darken-4">Veuillez renseigner les informations sur les flux :</h6>
            </div>
        </div>

        <div class="grille-flex">
            <div class="flux-card" id="div-fluxAchats">
                <p class="flux-card-title">Achats</p>
                <div id="col-natureMar" class="mrg">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <label for="natureMarAchats" class="left">Nature de la Marchandise
                                Principale</label>
                            <div class="input-field" style="margin : 0 20px 0 0">
                                <input id="natureMarAchats" class="autocomplete natureMar-autocomplete" type="text"
                                    placeholder="Ex: Matériel Informatique">
                            </div>
                            <span id="natureMarAchats-error" class="helper-text red-text"></span>
                        </div>
                        <div class="chip modulo " id="chip-modulo-natureMarAchats" style="display: none;">
                            Mod. Marchandise : x2
                        </div>
                    </div>
                </div>

                <hr class="divider" />

                <div class="row">
                    <div class="col s6">
                        <div>
                            <label for="valeurAnnuelleAchats" class="left">Valeur Annuelle</label>
                            <input id="valeurAnnuelleAchats" type="number" placeholder="En (€)">
                            <span id="valeurAnnuelleAchats-error" class="helper-text red-text"></span>
                        </div>
                    </div>
                    <div class="col s6">
                        <div>
                            <label for="montantAchats" class="left">Montant à Garantir</label>
                            <input id="montantAchats" type="number" placeholder="En (€)">
                            <span id="montantAchats-error" class="helper-text red-text"></span>
                        </div>
                    </div>
                </div>
                <div class="chip modulo " id="chip-modulo-montantAchats" style="display: none;">
                    Mod. Montant : x2
                </div>

                <hr class="divider" />

                <div class="mrg">
                    <table class="highlight centered moyenTransportTarif" id="moyenTransportAchats">
                        <thead>
                            <tr>
                                <th colspan="2">Type de Transport</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td class="transport-td">
                                    <i class="material-icons" aria-hidden="true">local_shipping</i> Terrestre
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="terrestre-achats" name="moyenTransportAchats"
                                            value="terrestre" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">directions_boat</i> Maritime
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="maritime-achats" name="moyenTransportAchats"
                                            value="maritime" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">flight</i> Aérien
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="aerien-achats" name="moyenTransportAchats"
                                            value="aerien" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">email</i> Postal
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="postal-achats" name="moyenTransportAchats"
                                            value="postal" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">multiple_stop</i> Multimodal
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="multimodal-achats" name="moyenTransportAchats"
                                            value="multimodal" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div style="padding : 0 5rem">
                    <div class="row">
                        <label>Conditionnement Usuel :</label>
                        <hr class="underline">
                    </div>
                    <div class="row">
                        <select id="conditionnementAchats" name="conditionnement">
                            <option disabled selected>Selectionner le conditionnement</option>
                        </select>
                    </div>
                    <div class="chip modulo " id="chip-modulo-condAchats" style="display: none;">
                        Mod. Conditionnement : x2
                    </div>
                </div>

                <div class="row">
                    <div style="display: flex; justify-content: space-between; align-items: flex-end;">
                        <label>Zone géographique principale :</label>
                        <div>
                            <button class="circle" type="button" name="zonesInfos">?</button>
                        </div>
                    </div>
                    <hr>

                    <div style="margin-top: 20px;">
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneAchats1" name="zoneAchats" class="filled-in"
                                    value="zone1" />
                                <span id="zoneAchats1-text">Zone 1 - France Métropolitaine et pays
                                    limitrophes</span>
                            </label>
                            <button class="circle" type="button" name="btnZone1">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneAchats2" name="zoneAchats" class="filled-in"
                                    value="zone2" />
                                <span id="zoneAchats2-text">Zone 2 - Union Européenne</span>
                            </label>
                            <button class="circle" type="button" name="btnZone2">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneAchats3" name="zoneAchats" class="filled-in"
                                    value="zone3" />
                                <span id="zoneAchats3-text">Zone 3 - Autres pays européens sauf Russie et
                                    Ukraine</span>
                            </label>
                            <button class="circle" type="button" name="btnZone3">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneAchats4" name="zoneAchats" class="filled-in"
                                    value="zone4" />
                                <span id="zoneAchats4-text">Zone 4 - Pays du Maghreb et Amérique du Nord
                                    (USA/Canada/Mexique)</span>
                            </label>
                            <button class="circle" type="button" name="btnZone4">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneAchats5" name="zoneAchats" class="filled-in"
                                    value="zone5" />
                                <span id="zoneAchats5-text">Zone 5 - Amérique Centrale et Sud / Caraïbes, Asie et
                                    Océanie</span>
                            </label>
                            <button class="circle" type="button" name="btnZone5">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneAchats6" name="zoneAchats" class="filled-in"
                                    value="zone6" />
                                <span id="zoneAchats6-text">Zone 6 - Afrique hors Maghreb / Proche Orient / Moyen
                                    Orient</span>
                            </label>
                            <button class="circle" type="button" name="btnZone6">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneAchats7" class="filled-in" checked disabled />
                                <span id="zone7-text">Pays exclus</span>
                            </label>
                            <button class="circle" type="button" name="btnZone7">?</button>
                        </div>
                    </div>
                    <div class="chip modulo " id="chip-modulo-zoneAchats" style="display: none;">
                        Mod. Zone Transport : x2
                    </div>
                </div>

                <hr class="divider" />

                <div class="row" style="padding : 0 5rem">
                    <div class="row">
                        <label>Garanties Optionnelles</label>
                        <hr>
                    </div>
                    <div class="left-align" style="display: flex; flex-direction: column; margin-bottom: 30px;">
                        <label>
                            <input id="risqueGuerreAchats" type="checkbox" value="risqueGuerreAchats"
                                class="filled-in" />
                            <span>Risque de Guerre</span>
                        </label>
                    </div>

                    <div id="row-typeGarantieRGAchats" 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="typeGarantieRGAchats" id="typeGarantieRGAchats-demande" type="radio"
                                    value="etendue" checked />
                                <span>Garantie étendue</span>
                            </label>
                            <label>
                                <input name="typeGarantieRGAchats" id="typeGarantieRGAchats-waterborne" type="radio"
                                    value="waterborne" />
                                <span>Garantie waterborne</span>
                            </label>
                        </div>


                        <div class="row" style="margin-top: 30px;">
                            <label>Engagement :</label>
                            <hr>
                        </div>

                        <label for="engagementRGAchats" class="left">Engagement</label>
                        <div class="input-field">
                            <input id="engagementRGAchats" type="number" placeholder="En (€)">
                        </div>
                        <span id="engagementRGAchats-error" class="helper-text red-text"></span>
                    </div>
                </div>
                <div class="chip step" id="chip-step-achats" style="display: none">
                    Prime :
                </div>
            </div>

            <div class="flux-card" id="div-fluxVentes">
                <p class="flux-card-title">Ventes</p>

                <div id="col-natureMar" class="mrg">
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <label for="natureMarVentes" class="left">Nature de la Marchandise
                                Principale</label>
                            <div class="input-field" style="margin : 0 20px 0 0">
                                <input id="natureMarVentes" class="autocomplete natureMar-autocomplete" type="text"
                                    placeholder="Ex: Matériel Informatique">
                            </div>
                            <span id="natureMarVentes-error" class="helper-text red-text"></span>
                        </div>
                        <div class="chip modulo " id="chip-modulo-natureMarVentes" style="display: none;">
                            Mod. Marchandise : x2
                        </div>
                    </div>
                </div>
                <hr class="divider" />

                <div class="mrg row">
                    <div class="col s6">
                        <label for="valeurAnnuelleVentes" class="left">Valeur Annuelle</label>
                        <input id="valeurAnnuelleVentes" type="number" placeholder="En (€)">
                        <span id="valeurAnnuelleVentes-error" class="helper-text red-text"></span>
                    </div>
                    <div class="col s6">
                        <label for="montantVentes" class="left">Montant à Garantir</label>
                        <input id="montantVentes" type="number" placeholder="En (€)">
                        <span id="montantVentes-error" class="helper-text red-text"></span>
                    </div>
                </div>

                <div class="chip modulo " id="chip-modulo-montantVentes" style="display: none;">
                    Mod. Montant : x2
                </div>

                <hr class="divider" />

                <div class="mrg">
                    <table class="highlight centered moyenTransportTarif" id="moyenTransportVentes">
                        <thead>
                            <tr>
                                <th colspan="2">Type de Transport</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">local_shipping</i> Terrestre

                                </td>
                                <td> <label>
                                        <input type="radio" id="terrestre-ventes" name="moyenTransportVentes"
                                            value="terrestre" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">directions_boat</i> Maritime
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="maritime-ventes" name="moyenTransportVentes"
                                            value="maritime" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">flight</i> Aérien
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="aerien-ventes" name="moyenTransportVentes"
                                            value="aerien" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">email</i> Postal
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="postal-ventes" name="moyenTransportVentes"
                                            value="postal" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <i class="material-icons" aria-hidden="true">multiple_stop</i> Multimodal
                                </td>
                                <td>
                                    <label>
                                        <input type="radio" id="multimodal-ventes" name="moyenTransportVentes"
                                            value="multimodal" />
                                        <span></span>
                                    </label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div style="padding : 0 5rem">
                    <div class="row">
                        <label>Conditionnement Usuel :</label>
                        <hr class="underline">
                    </div>
                    <div class="row">
                        <select id="conditionnementVentes" name="conditionnement">
                            <option disabled selected>Selectionner le conditionnement</option>
                        </select>
                    </div>
                    <div class="chip modulo " id="chip-modulo-condVentes" style="display: none;">
                        Mod. Conditionnement : x2
                    </div>
                </div>

                <div class="row">
                    <div style="display: flex; justify-content: space-between; align-items: flex-end;">
                        <label>Zone géographique principale :</label>
                        <div>
                            <button class="circle" type="button" name="zonesInfos">?</button>
                        </div>
                    </div>
                    <hr>

                    <div style="margin-top: 20px;">
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneVentes1" name="zoneVentes" class="filled-in"
                                    value="zone1" />
                                <span id="zoneVentes1-text">Zone 1 - France Métropolitaine et pays
                                    limitrophes</span>
                            </label>
                            <button class="circle" type="button" name="btnZone1">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneVentes2" name="zoneVentes" class="filled-in"
                                    value="zone2" />
                                <span id="zoneVentes2-text">Zone 2 - Union Européenne</span>
                            </label>
                            <button class="circle" type="button" name="btnZone2">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneVentes3" name="zoneVentes" class="filled-in"
                                    value="zone3" />
                                <span id="zoneVentes3-text">Zone 3 - Autres pays européens sauf Russie et
                                    Ukraine</span>
                            </label>
                            <button class="circle" type="button" name="btnZone3">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneVentes4" name="zoneVentes" class="filled-in"
                                    value="zone4" />
                                <span id="zoneVentes4-text">Zone 4 - Pays du Maghreb et Amérique du Nord
                                    (USA/Canada/Mexique)</span>
                            </label>
                            <button class="circle" type="button" name="btnZone4">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneVentes5" name="zoneVentes" class="filled-in"
                                    value="zone5" />
                                <span id="zoneVentes5-text">Zone 5 - Amérique Centrale et Sud / Caraïbes, Asie et
                                    Océanie</span>
                            </label>
                            <button class="circle" type="button" name="btnZone5">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneVentes6" name="zoneVentes" class="filled-in"
                                    value="zone6" />
                                <span id="zoneVentes6-text">Zone 6 - Afrique hors Maghreb / Proche Orient / Moyen
                                    Orient</span>
                            </label>
                            <button class="circle" type="button" name="btnZone6">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zoneVentes7" class="filled-in" checked disabled />
                                <span id="zone7-text">Pays exclus</span>
                            </label>
                            <button class="circle" type="button" name="btnZone7">?</button>
                        </div>
                    </div>
                    <div class="chip modulo " id="chip-modulo-zoneVentes" style="display: none;">
                        Mod. Zone Transport : x2
                    </div>
                </div>

                <hr class="divider" />

                <div class="row" style="padding : 0 5rem">
                    <div class="row">
                        <label>Garanties Optionnelles</label>
                        <hr>
                    </div>
                    <div class="left-align" style="display: flex; flex-direction: column; margin-bottom: 30px;">
                        <label>
                            <input id="risqueGuerreVentes" type="checkbox" value="risqueGuerreVentes"
                                class="filled-in" />
                            <span>Risque de Guerre</span>
                        </label>
                    </div>

                    <div id="row-typeGarantieRGVentes" 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="typeGarantieRGVentes" id="typeGarantieRGVentes-demande" type="radio"
                                    value="etendue" checked />
                                <span>Garantie étendue</span>
                            </label>
                            <label>
                                <input name="typeGarantieRGVentes" id="typeGarantieRGVentes-waterborne" type="radio"
                                    value="waterborne" />
                                <span>Garantie waterborne</span>
                            </label>
                        </div>


                        <div class="row" style="margin-top: 30px">
                            <label>Engagement :</label>
                            <hr>
                        </div>

                        <label for="engagementRGVentes" class="left">Engagement</label>
                        <div class="input-field">
                            <input id="engagementRGVentes" type="number" placeholder="En (€)">
                        </div>
                        <span id="engagementRGVentes-error" class="helper-text red-text"></span>
                    </div>
                </div>

                <div class="chip step" id="chip-step-ventes" style="display: none">
                    Prime :
                </div>
            </div>
        </div>
    </div>

    <div class="header" id="div-transport">
        <div class="chapter">
            <i class="material-icons">local_shipping</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 class="grille-flex">
            <div>
                <div class="row">
                    <label>Moyen de Transport</label>
                    <hr>
                </div>

                <table class="highlight centered moyenTransportTarif" id="moyenTransportTarif">
                    <thead>
                        <tr>
                            <th colspan="2">Type de Transport</th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>
                                <i class="material-icons" aria-hidden="true">local_shipping</i> Terrestre
                            </td>
                            <td>
                                <label>
                                    <input type="radio" id="terrestre-global" name="moyenTransportGlobal"
                                        value="terrestre" />
                                    <span></span>
                                </label>
                            </td>
                        </tr>
                        <!-- <tr>
                            <td>
                                <div><i class="material-icons" aria-hidden="true">directions_boat</i> Maritime</div>
                                <div>
                                    <label>
                                        <input type="radio" id="maritime-global" name="moyenTransportGlobal"
                                            value="maritime" />
                                        <span></span>
                                    </label>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div><i class="material-icons" aria-hidden="true">flight</i> Aérien</div>
                                <div>
                                    <label>
                                        <input type="radio" id="aerien-global" name="moyenTransportGlobal"
                                            value="aerien" />
                                        <span></span>
                                    </label>
                                </div>
                            </td>
                        </tr> -->
                        <tr>
                            <td>
                                <i class="material-icons" aria-hidden="true">multiple_stop</i> Multimodal
                            </td>
                            <td>
                                <label>
                                    <input type="radio" id="multimodal-global" name="moyenTransportGlobal"
                                        value="multimodal" />
                                    <span></span>
                                </label>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <!-- <div class="row">
                    <label>Conditionnement Usuel</label>
                    <hr>
                </div> 

                 <div style="display: flex; flex-direction: column; align-items: flex-start;">
                    <label>
                        <input name="conditionnement" type="radio" value="usuel" />
                        <span>Cartons, Palettes, Conteneurs</span>
                    </label>
                    <label>
                        <input name="conditionnement" type="radio" value="conteneur" />
                        <span>En Conteneur sur Ligne Régulière</span>
                    </label>
                </div> -->

                <div class="row">
                    <label>Conditionnement Usuel</label>
                    <hr class="underline">
                </div>
                <div>
                    <select id="conditionnementGlobal" name="conditionnement">
                        <option disabled selected>Selectionner le conditionnement</option>
                    </select>
                </div>
                <div class="chip modulo" id="chip-modulo-cond" style="display: none;">
                    Mod. Conditionnement : x2
                </div>
                <div class="chip step" id="chip-step-cond" style="display: none;">
                    Prime :
                </div>

            </div>
        </div>
    </div>

    <div class="row" id="div-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 style="display: flex; justify-content: space-between; align-items: flex-end;">
                        <label>Zone géographique principale :</label>
                        <div>
                            <button class="circle" type="button" name="zonesInfos">?</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="radio" id="zone1" name="zone" class="filled-in" value="zone1" />
                                <span id="zone1-text">Zone 1 - France Métropolitaine et pays limitrophes</span>
                            </label>
                            <button class="circle" type="button" name="btnZone1">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zone2" name="zone" class="filled-in" value="zone2" />
                                <span id="zone2-text">Zone 2 - Union Européenne</span>
                            </label>
                            <button class="circle" type="button" name="btnZone2">?</button>
                        </div>
                        <!-- <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="checkbox" id="zone3" name="zone" class="filled-in" value="zone3" />
                                <span id="zone3-text">Zone 3 - Autres pays européens sauf Russie et Ukraine</span>
                            </label>
                            <button class="circle" type="button" name="btnZone3">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="checkbox" id="zone4" name="zone" class="filled-in" value="zone4" />
                                <span id="zone4-text">Zone 4 - Pays du Maghreb et Amérique du Nord
                                    (USA/Canada/Mexique)</span>
                            </label>
                            <button class="circle" type="button" name="btnZone4">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="checkbox" id="zone5" name="zone" class="filled-in" value="zone5" />
                                <span id="zone5-text">Zone 5 - Amérique Centrale et Sud / Caraïbes, Asie et
                                    Océanie</span>
                            </label>
                            <button class="circle" type="button" name="btnZone5">?</button>
                        </div>
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="checkbox" id="zone6" name="zone" class="filled-in" value="zone6" />
                                <span id="zone6-text">Zone 6 - Afrique hors Maghreb / Proche Orient / Moyen
                                    Orient</span>
                            </label>
                            <button class="circle" type="button" name="btnZone6">?</button>
                        </div> -->
                        <div style="display: flex;align-items: center;justify-content: space-between;">
                            <label>
                                <input type="radio" id="zone7" class="filled-in" checked disabled />
                                <span id="zone7-text">Pays exclus</span>
                            </label>
                            <button class="circle" type="button" name="btnZone7">?</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="chip modulo" id="chip-modulo-zone" style="display: none">
                Mod. Zone Transport : x2
            </div>

            <div class="chip step" id="chip-step-zone" style="display: none">
                Prime :
            </div>
        </div>
    </div>

    <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 s6 mrg">
            <div class="row">
                <label>Risques Ordinaires</label>
                <hr>
            </div>
            <div class="left-align padding-bottom" style="display: flex; flex-direction: column;">
                <label>
                    <input name="risqueOrdinaire" id="tousRisques" type="radio" value="tousRisques" checked />
                    <span>Tous Risques</span>
                </label>
                <label>
                    <input name="risqueOrdinaire" id="eventMaj" type="radio" value="eventMaj" />
                    <span>Evenements Majeurs</span>
                </label>
            </div>

            <div id="row-rg">
                <div class="row">
                    <label>Risque de Guerre</label>
                    <hr>
                </div>
                <div class="row">
                    <div class="left-align col s7">
                        <label>
                            <input type="checkbox" id="rg" name="rg" class="filled-in" />
                            <span id="rg-text"> Risque de Guerre</span>
                        </label>
                    </div>

                    <div class="left-align col s5" style="display: none;" id="col-typeRG">
                        <div>
                            <span>Type de garantie RG :</span>
                            <hr class="form" />
                            <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 style="margin-top: 20px;">
                            <span>Engagement :</span>
                            <hr class="form" />

                            <label for="engagementRG" class="left">Engagement</label>
                            <div class="input-field" style="margin : 0 20px 0 0;">
                                <input id="engagementRG" type="number" placeholder="En (€)">
                            </div>
                            <span id="engagementRG-error" class="helper-text red-text"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col s6 mrg">
            <div class="row">
                <label>Extensions de garantie :</label>
                <hr>
            </div>
            <div class="row" id="row-extensions">
                <div class="row" id="row-TPPC">
                    <div class="left-align col s7">
                        <label>
                            <input type="checkbox" id="TPPC" name="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;">
                        <label for="capitalTPPC">Montant à Garantir : </label>
                        <input id="capitalTPPC" type="number" placeholder="En (€)" />
                        <span id="capitalTPPC-error" class="helper-text red-text"></span>

                        <hr class="form" />

                        <label for="nbVehicTPPC">Nombre de véhicules : </label>
                        <input id="nbVehicTPPC" type="number" />
                        <span id="nbVehicTPPC-error" class="helper-text red-text"></span>


                    </div>
                </div>

                <hr class="form" />


                <div class="row" id="row-marExpo">
                    <div class="left-align col s7">
                        <label>
                            <input type="checkbox" id="marEnExpo" name="marEnExpo" class="filled-in" />
                            <span id="marEnExpo-text"> Marchandises En Exposition</span>
                        </label>
                    </div>

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

                        <hr class="form" />

                        <label for="capitalExposition">Capital par Exposition : </label>
                        <input id="capitalExposition" type="number" />
                        <span id="capitalExposition-error" class="helper-text red-text"></span>

                        <hr class="form" />

                        <label>Type de Marchandise :</label>
                        <select id="typeMarEnExpo" name="typeMar">
                            <option value="" disabled selected>Type de Marchandise:</option>
                        </select>

                    </div>
                </div>
            </div>
        </div>

        <div class="chip step" id="chip-step-extensions" style="display: none">
            Prime :
        </div>
    </div>
    <div class="header">
        <div class="chapter">
            <i class="material-icons">local_shipping</i><span style="margin-left: 10px;">Informations sur les
                sinistres
                :</span>
        </div>

        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez renseigner le montant de sinistres annuels :</h6>
        </div>
    </div>

    <div class="row">
        <div id="row-sinistres">
            <div class="row">
                <div class="col s6 mrg" id="col-oldFranchise">
                    <label for="oldFranchise" class="left">Franchise du Contrat à Reprendre </label>
                    <div class="input-field" style="margin : 0">
                        <input id="oldFranchise" type="number" placeholder="En (€)">
                    </div>
                    <span id="oldFranchise-error" class="helper-text red-text"></span>
                </div>

                <div class="col s6 mrg">
                    <label for="sinistres" class="left">Charge sinistre annuelle retenue par le souscripteur</label>
                    <div class="input-field" style="margin : 0">
                        <input id="sinistres" type="number" placeholder="En (€)">
                    </div>
                    <span id="sinistres-error" class="helper-text red-text red"></span>
                    <div class="chip modulo red" id="chip-primePlancher" style="display: none;">
                        Prime Charge sur sinistre Indicative : €
                    </div>
                </div>
            </div>

            <div class="grille-flex">
                <div>
                    <p>Voulez-vous affiner votre tarif sur base de la statistique sinistre ?</p>
                    <label>
                        <input name="affinerTarif" class="filled-in" id="affinerTarif" type="checkbox" />
                        <span>Affiner le Tarif</span>
                    </label>
                </div>
            </div>

            <div id="row-sinistresAsIf" style="display : none;">
                <div class="row mrg asIfRow">
                    <div class="col s1">
                        <button class="btn" type="button" id="addAsIf">
                            <i class="material-icons">add</i>
                        </button>
                    </div>
                    <div class="col s4">
                        <label for="franchiseAsIf" class="left">Franchise As If</label>
                        <div class="input-field" style="margin : 0">
                            <input id="franchiseAsIf" class="franchiseAsIf" type="number" placeholder="En (€)">
                        </div>
                        <span id="franchiseAsIf-error" class="helper-text red-text"></span>
                    </div>
                    <div class="col s4">
                        <label for="sinistresAsIf" class="left">Charge sinistre annuelle revue selon as if
                            franchise</label>
                        <div class="input-field" style="margin : 0">
                            <input type="number" class="sinistresAsIf" id="sinistresAsIf" placeholder="En (€)">
                        </div>
                    </div>
                    <div class="col s3">
                        <span id="sinistresAsIf-error" class="helper-text red-text"></span>
                        <div class="chip modulo red" id="chip-modulo-sinistresAsIf" style="display: none;">
                            Prime Plancher Indicative : X€
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="header">
        <div class="chapter">
            <i class="material-icons">credit_card</i><span style="margin-left: 10px;">Propositions tarifaires (Hors
                Taxes):</span>
        </div>

        <div class="row">
            <h6 class="red-text text-darken-4">Veuillez selectionner la proposition tarifaire adaptée :</h6>
        </div>
    </div>

    <div id="row-champsManquants">
        <p class="red-text">
            Veuillez renseigner les champs manquants :
        </p>
        <div>
            <div class="chip" id="chip-act">Activité</div>
            <div class="chip" id="chip-police">Type de Police</div>
            <div class="chip" id="chip-ca">Chiffre d'Affaires</div>
            <div class="chip" id="chip-natureMar">Marchandise principale</div>
            <div class="chip" id="chip-transport">Transport</div>
            <div class="chip" id="chip-conditionnement">Conditionnement Usuel</div>
            <div class="chip" id="chip-montant">Montant à Garantir</div>
            <div class="chip" id="chip-zone">Zone géographique</div>
            <div class="chip" id="chip-valeurAnnuelle">Valeur Annuelle</div>
        </div>
    </div>

    <div id="propositions" class="propositions-flex" style="display: none">
        <div>
            <div class="franchise-card card border" id="sansFranchise">
                <div class="red darken-3 white-text card-tarif-head">
                    <div class="card-tarif-head-content">
                        <span>Sans Franchise</span> <br />
                        <span class="price" id="proposition-sansFranchise">0.00€</span>
                    </div>
                </div>
                <div class="card-content no-padding txt-color">
                    <p id="mod-activite-sansFranchise">Modulation Activité : +0%</p>
                    <p id="mod-marchandise-sansFranchise">Modulation Marchandise : 0%</p>
                    <p id="mod-ca-sansFranchise">Modulation CA : 0%</p>
                    <p id="mod-franchise-sansFranchise">Modulation Franchise : 0%</p>

                    <p id="mod-tppc-sansFranchise" style="display: none;">Franchise TPPC : 0%</p>
                    <p id="mod-expo-sansFranchise" style="display: none;">Franchise Exposition : 0%</p>
                </div>
                <div class="card-action">
                    <button class="btn" type="submit" name="sansFranchise">Choisir</button>
                </div>
            </div>
        </div>
        <div>
            <div class="franchise-card card border" id="franchise350">
                <div class="yellow darken-3 white-text card-tarif-head">
                    <div class="card-tarif-head-content">
                        <span>Franchise 350 €</span> <br />
                        <span class="price" id="proposition-franchise350">0.00€</span>
                    </div>
                </div>
                <div class="card-content no-padding txt-color">
                    <p id="mod-activite-franchise350">Modulation Activité : 0%</p>
                    <p id="mod-marchandise-franchise350">Modulation Marchandise : 0%</p>
                    <p id="mod-ca-franchise350">Modulation CA : 0%</p>
                    <p id="mod-franchise-franchise350">Modulation Franchise : 0%</p>

                    <p id="mod-tppc-franchise350" style="display: none;">Franchise TPPC : 0%</p>
                    <p id="mod-expo-franchise350" style="display: none;">Franchise Exposition : 0%</p>
                </div>
                <div class="card-action">
                    <button class="btn" type="submit" name="franchise350">Choisir</button>
                </div>
            </div>
        </div>
        <div>
            <div class="franchise-card card border" id="franchise750">
                <div class="green darken-3 white-text card-tarif-head">
                    <div class="card-tarif-head-content">
                        <span>Franchise 750 €</span> <br />
                        <span class="price" id="proposition-franchise750">0.00€</span>
                    </div>
                </div>
                <div class="card-content no-padding txt-color">
                    <p id="mod-activite-franchise750">Modulation Activité : 0%</p>
                    <p id="mod-marchandise-franchise750">Modulation Marchandise : 0%</p>
                    <p id="mod-ca-franchise750">Modulation CA : 0%</p>
                    <p id="mod-franchise-franchise750">Modulation Franchise : 0%</p>

                    <p id="mod-tppc-franchise750" style="display: none;">Franchise TPPC : 0%</p>
                    <p id="mod-expo-franchise750" style="display: none;">Franchise Exposition : 0%</p>
                </div>
                <div class="card-action">
                    <button class="btn" type="submit" name="franchise750">Choisir</b>
                </div>
            </div>
        </div>
    </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>
</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>


<div id="modalTPPC" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h4>Attention</h4>
            <hr>

            <p>
                Pour plus de 5 véhicules ou un montant supérieur à 100 000€, privilégier un contrat séparé pour la TPPC.
            </p>
        </div>
        <div class="modal-footer">
            <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
        </div>
    </div>
</div>

<div id="modalMarchandise" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h4>Marchandise Principale</h4>
            <hr>

            <p>
                La marchandise principale représente plus de 50 % du chiffre d'affaires.
            </p>
            <p>
                Toutefois, si une marchandise particulière représente plus de 35 % du chiffre d'affaires et est plus
                majorante que celle qui dépasse les 50 %,
                elle doit être considérée comme marchandise principale.
                Dans ce cas, l'autre marchandise sera classée comme secondaire.
            </p>
            <p>
                Les marchandises secondaires doivent être renseignées dans le projet.
            </p>
        </div>
        <div class="modal-footer">
            <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
        </div>
    </div>
</div>

<div id="modalZones" class="modal">
    <div class="modal-content center-align">
        <div class="row">
            <h4>Zones Géographiques</h4>
            <hr>

            <p>
                Vous ne pouvez selectionner qu'une zone principale.
                Les zones secondaires seront à renseigner sur le projet.
            </p>
        </div>
        <div class="modal-footer">
            <a class="modal-close waves-effect waves-green btn-flat">Fermer</a>
        </div>
    </div>
</div>

<!-- MODAL Commentaires -->
<div id="modalTarifCom" class="modal">
    <div class="modal-content">


        <div class="mrg row" style="margin-top: 2rem;">
            <p id="tarifRefText" style="font-size: 2rem">Tarif de Référence : 00.00€</p>
            <div id="qualiteDiv" style="display: none;">
                <span class="material-icons" id="modalTarifCom-icon">
                    mood_bad
                </span>
                <p id="qualitePrime">99.99%</p>
            </div>

            <h6 class="red-text text-darken-4"> 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">
                        <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">
                <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" name="" 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>