Subversion Repositories eFlore/Applications.cel

Rev

Rev 3037 | Blame | Compare with Previous | Last modification | View Log | RSS feed

<!DOCTYPE html>
<html lang="fr">
        <head>
                <title>Les arbres remarquables de Grenoble-Alpes Métropole</title>

                <meta charset="utf-8">

                <meta name="revisit-after" content="15 days" />
                <meta name="robots" content="index,follow" />
                <meta name="author" content="Delphine CAUQUIL" />
                <meta name="keywords" content="Arbres remarquables, projet, saisie, observation, Frapna CEL" />
                <meta name="description" content="Projet Arbres remarquables de Grenoble-Alpes Métropole - Widget de saisie simplifiée pour le CEL" />

                <!-- Viewport Mobile -->
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                <!-- Favicones -->
                <!-- <link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/favicon.ico" /> -->

                <!-- Javascript : bibliothèques -->
                <!-- Google Map v3 -->
                <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
                <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=<?php echo $cleGoogleMaps; ?>&language=fr&amp;region=FR"></script>
                <!-- Proj4js -->
                <script type="text/javascript" src="https://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>

                <!-- Jquery -->
                <script src="https://code.jquery.com/jquery-1.12.1.js"></script>
                <!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
                <script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
                <script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
                <!-- Jquery Plugins -->
                <!-- Jquery Validate : nécessaire pour la validation des formulaires -->
                <script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
                <script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
                <!-- Jquery Form :nécessaire pour l'upload des images -->
                <script src="https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
                <!-- Bootstrap -->
                <script src="https://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>

                <!-- Javascript : appli saisie -->
                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
                <script src="<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/js/WidgetSaisieArbresRemarquables.js"></script>
                <script src="<?=$url_base?>saisie?projet=arbres-remarquables&amp;service=taxons" type="text/javascript"></script>
                <script>
                //<![CDATA[
           $(document).ready(function() {
                                // OMG un modèle objet !!
                                var widget = new WidgetSaisieArbresRemarquables();

                                // la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
                                widget.taxons = taxons;

                                // La présence du parametre 'debug' dans l'URL enclenche le débogage
                                widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
                                // La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
                                widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
                                // Mot-clé du widget/projet
                                widget.tagProjet = "WidgetSaisie,ArbresRemarquables";
                                // Mots-clés à ajouter aux images
                                widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
                                widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
                                widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
                                // Mots-clés à ajouter aux observations
                                widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
                                widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
                                widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
                                // Précharger le formulaire avec les infos d'une observation
                                widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
                                // URL du web service réalisant l'insertion des données dans la base du CEL.
                                widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
                                // URL du web service permettant de récupérer les infos d'une observation du CEL.
                                widget.serviceObsUrl = "<?=$url_ws_obs?>";
                                // Code du référentiel utilisé pour les nom scientifiques.
                                widget.nomSciReferentiel = "<?=$ns_referentiel?>";
                                // Indication de la présence d'une espèce imposée
                                widget.especeImposee = "<?=$espece_imposee; ?>";
                                // Tableau d'informations sur l'espèce imposée
                                widget.infosEspeceImposee = <?=$infos_espece; ?>;
                                // Nombre d'élément dans les listes d'auto-complétion
                                widget.autocompletionElementsNbre = 20;

                                // Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
                                widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
                                        "masque={masque}&"+
                                        "recherche=etendue&"+
                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
                                        "retour.tri=alpharet&"+ // tri "à la CeL"
                                        "ns.structure=au"+"&"+
                                        "navigation.limite=" + widget.autocompletionElementsNbre;
                                // Nombre d'observations max autorisé avant transmission
                                widget.obsMaxNbre = 10;
                                // Durée d'affichage en milliseconde des messages d'informations
                                widget.dureeMessage = 15000;
                                // Squelette d'URL du web service de l'annuaire.
                                widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
                                // Squelette d'URL du web service d'eFlore fournissant les noms de communes.
                                widget.serviceNomCommuneUrl = "https://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
                                // Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
                                widget.serviceNomCommuneUrlAlt = "https://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
                                // Squelette d'URL du web service d'eFlore fournissant l'altitude
                                widget.serviceAltitudeUrl = "https://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
                                // URL du marqueur à utiliser dans la carte Google Map
                                widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/marqueurs/epingle.png";
                                // URL de l'icône du chargement en cours
                                widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/icones/chargement.gif";
                                // URL de l'icône du chargement en cours d'une image
                                widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/icones/chargement-image.gif";
                                // URL de l'icône du calendrier
                                widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/icones/calendrier.png";
                                // URL de l'icône pour une photo manquante
                                widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/img/icones/pasdephoto.png";

                                // Initialisation du bousin
                                widget.init();
                        });
                //]]>
                </script>

                <!-- CSS -->
                <link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
                <link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
                <link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
                <link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
                <link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-remarquables/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-remarquables'?>.css" />

                <!--  Google Analytics -->
                <?php if($prod): ?>
                        <?php include "analytics.html"; ?>
                <?php endif; ?>
        </head>

        <body data-spy="scroll">
                <div class="container">
                        <div class="page-header">
                                <h1>
                                        <img id="logo-titre" src="<?=$url_base?>/modules/saisie/squelettes/arbres-remarquables/img/logos/frapna.jpg" alt="Frapna" />
                                         Inventaire participatif des arbres remarquables de l'Isère
                                </h1>
                        </div>
                        <div class="row">
                                <div class="col-md-6">
                                        <div id="intro" class="well well-lg">
                                                <a class="fermer" data-toggle="collapse" data-target="#intro-txt">
                                                        <h3 class="titre">
                                                                Le Projet «&nbsp;Inventaire des arbres remarquables&nbsp;»
                                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                                        </h3>
                                                </a>
                                                <div id="intro-txt" class="collapse in">
                                                        <p>
                                                                Les <a data-toggle="modal" data-target="#projet-description">arbres remarquables</a>,
                                                                 sont pour nous, humains, à la croisée de la nature et de la culture. De la nature ils 
                                                                sont une émanation puissante et intemporelle ; leur présence nous rend palpable le rythme 
                                                                des saisons, des années et nous ouvre, jusque dans les villes, une fenêtre sur le sauvage. 
                                                                Leur longévité, qui peut traverser les siècles et à coté de laquelle nos vies humaines 
                                                                paraissent bien modestes, jalonne notre histoire comme les tilleuls de Sully ou certains 
                                                                genévriers millénaires.
                                                        </p>
                                                        <p>
                                                                 Après avoir lancé l’inventaire sur le territoire de Grenoble Alpes Métropole, la 
                                                                 <a href="http://www.frapna-38.org/" target="_blank">FRAPNA</a> élargit la possibilité de 
                                                                 saisie à tout le département de l'Isère, avec deux objectifs principaux : <br />
                                                                - la <strong>sensibilisation</strong> à ce patrimoine irremplaçable encore trop souvent ignoré ou méconnu,<br />
                                                                - la <strong>connaissance</strong>, car leur identification est indispensable pour qu'ils puissent être préservés.
                                                        </p>
                                                        <p>
                                                                Participez à cet inventaire en recensant les arbres remarquables que vous observez en Isère à 
                                                                l'aide du formulaire de saisie ci-dessous.

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

                                <div class="col-md-6">
                                        <div id="aide" class="well well-lg">
                                                <a class="fermer" data-toggle="collapse" data-target="#aide-txt">
                                                        <h3 class="titre">
                                                                Aide
                                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                                        </h3>
                                                </a>
                                                <div id="aide-txt" class="collapse in">
                                                        <p>
                                                                Cet outil vous permet de partager simplement vos observations avec
                                                                <a href="http://www.frapna-38.org/" target="_blank">la FRAPNA</a> et le
                                                                <a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
                                                                (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
                                                                Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
                                                                <a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
                                                                Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
                                                                Elles apparaissent immédiatement sur les
                                                                <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
                                                        </p>
                                                        <p class="discretion">
                                                                Pour toute question ou remarque,
                                                                <a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
                                                                        target="_blank"
                                                                        onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
                                                                        contactez-nous</a>
                                                        </p>
                                                        <p class="discretion">
                                                                Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
                                                                <button id="btn-aide" class="btn btn-xs btn-success">
                                                                        <span class="glyphicon glyphicon-question-sign icon-white"></span>
                                                                        <span id="btn-aide-txt">Désactiver l'aide</span>
                                                                </button>
                                                        </p>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        
                        
                        
                        

                        <div class="well well-lg">
                                <h2>Observateur</h2>
                                <form id="form-observateur" role="form" autocomplete="on">
                                        <div class="row">
                                                <div class="col-md-6 form-group has-tooltip" data-placement="right"
                                                        title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
                                                                Si vous n'êtes pas inscrit ce n'est pas grave, vous pourrez le faire
                                                                ultérieurement. Des informations complémentaires vont vous être
                                                                demandées : prénom et nom.">
                                                        <label for="courriel"  title="Veuillez saisir votre adresse courriel.">
                                                                <strong class="obligatoire">*</strong>
                                                                Courriel
                                                        </label>
                                                        <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                                                                <input id="courriel" name="courriel" class="form-control" type="text"/>
                                                                <input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
                                                        </div>
                                                </div>
                                                <div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
                                                        <label for="courriel_confirmation" title="Veuillez confirmer le courriel.">
                                                                <strong class="obligatoire">*</strong> Courriel (confirmation)
                                                        </label>
                                                        <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                                                                <input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
                                                        </div>
                                                </div>
                                        </div>
                                        <div id="zone-prenom-nom" class="row hidden">
                                                <div class="col-md-6 form-group">
                                                        <label for="prenom">Prénom</label>
                                                        <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                                                <input id="prenom" name="prenom" class="form-control" type="text"/>
                                                        </div>
                                                </div>
                                                <div class="col-md-6 form-group">
                                                        <label for="nom">Nom</label>
                                                        <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                                                <input id="nom" name="nom" class="form-control" type="text"/>
                                                        </div>
                                                </div>
                                        </div>
                                </form>
                        </div>
                        <!-- Messages d'erreur du formulaire-->
                        <div class="row">
                                <div class="zone-alerte col-md-6 col-md-offset-3">
                                        <div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
                                                <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="alert-heading">Information : copier/coller</h4>
                                                <p>
                                                        Merci de ne pas copier/coller votre courriel.<br/>
                                                        La double saisie permet de vérifier l'absence d'erreurs.
                                                </p>
                                        </div>
                                        <div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
                                                <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="alert-heading">Information : courriel introuvable</h4>
                                                <p>
                                                        Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
                                                        Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
                                                        Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
                                                        il sera nécessaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
                                                </p>
                                        <div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
                                                <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="alert-heading">Information sur Google Maps</h4>
                                                <div class="contenu"></div>
                                        </div>
                                </div>
                        </div>
                        
                        
                        
                        
                        

                        <div class="well well-lg">
                                <div class="row">
                                        <div class="col-md-12">
                                                <h2>Lieu du relevé</h2>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-md-6">
                                                <div class="row">
                                                        <div class="col-md-3">
                                                                <strong title="Veuillez localiser l'observation">Géolocalisation</strong>
                                                        </div>
                                                        <div class="col-md-9 text-right">
                                                                <form id="form-carte-recherche" class="form-horizontal" role="form">
                                                                        <div class="form-group">
                                                                                <label for="carte-recherche" class="sr-only">Rechercher</label>
                                                                                <div class="col-md-12">
                                                                                        <div class="input-group">
                                                                                                <input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
                                                                                                                title="Permet de centrer la carte sur le lieu recherché."
                                                                                                                placeholder="Centrer la carte sur un lieu..."/>
                                                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </form>
                                                        </div>
                                                </div>
                                                <div class="row">
                                                        <div class="col-md-12">
                                                                <div id="map-canvas" class="has-tooltip"
                                                                        title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
                                                                                représentant votre station ou bien le glisser-déposer sur
                                                                                le lieu souhaité."></div>
                                                        </div>
                                                </div>
                                                <div class="row">
                                                        <div id="info-altitude" class="col-md-5">
                                                                <span>Altitude : </span>
                                                                <span id="marqueur-altitude"><span id="altitude"></span> m</span>
                                                        </div>

                                                        <div id="info-commune" class="col-md-7">
                                                                <span>Commune : </span>
                                                                <span id="marqueur-commune">
                                                                        <span id="commune-nom" class="commune-info"></span>
                                                                        (<span id="commune-code-insee" class="commune-info has-tooltip"
                                                                                title="Code INSEE de la commune"></span>)
                                                                </span>
                                                        </div>
                                                </div>
                                        </div>
                                        <div class="col-md-6">
                                                <form id="form-station" class="form-horizontal" role="form" autocomplete="on">
                                                        <div class="form-group has-tooltip"
                                                                        title="Vous pouvez cliquer sur l'icône de calendrier pour
                                                                                sélectionner une date dans un calendrier.">
                                                                <label for="date" class=" col-sm-4 control-label"
                                                                           title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Date du relevé
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <div class="input-group">
                                                                                <span id="date-icone" class="input-group-addon add-on"></span>
                                                                                <input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
                                                                        </div>
                                                                </div>
                                                        </div>

                                                        
                                                        <div class="row">
                                                                <div class="col-md-12">
                                                                        <button class="afficher-coord btn-coord btn btn-default"
                                                                                        data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
                                                                                Afficher les coordonnées (WGS 84 et Lambert 93)
                                                                        </button>
                                                                        <div id="coordonnees-geo" class="well hidden">
                                                                                <div class="row">
                                                                                        <div class="col-md-4">
                                                                                                <div id="coord-lat" class="form-group form-group-sm">
                                                                                                        <label for="latitude" class="col-sm-4 control-label">Latitude</label>
                                                                                                        <div class="col-sm-8">
                                                                                                                <input id="latitude" class="form-control" name="latitude" type="text"
                                                                                                                        title="Latitude (WGS 84)" value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="col-md-5">
                                                                                                <div id="coord-lng" class="form-group form-group-sm">
                                                                                                        <label for="latitude" class="col-sm-4 control-label">Longitude</label>
                                                                                                        <div class="col-sm-8">
                                                                                                                <input id="longitude" class="form-control" name="longitude" type="text"
                                                                                                                        title="Longitude (WGS 84)" value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="col-md-2">
                                                                                                <div id="coord-lng" class="form-group form-group-sm">
                                                                                                        <input type="button" id="geolocaliser"
                                                                                                                class="btn btn-default btn-sm has-tooltip"
                                                                                                                title="Centre la carte sur les coordonnées de latitude et longitude saisies."
                                                                                                                value="Voir sur la carte"/>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>

                                                                                <div class="row">
                                                                                        <div class="col-md-6">
                                                                                                <div id="coord-l93-x" class="form-group">
                                                                                                        <label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
                                                                                                        <div class="col-sm-5">
                                                                                                                <input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
                                                                                                                                name="coordonneeLambert93X"
                                                                                                                                data-label="Lambert 93 X"
                                                                                                                                value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="col-md-6">
                                                                                                <div id="coord-l93-y" class="form-group">
                                                                                                        <label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
                                                                                                        <div class="col-sm-5">
                                                                                                                <input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
                                                                                                                                name="coordonneeLambert93Y"
                                                                                                                                data-label="Lambert 93 Y"
                                                                                                                                value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </form>
                                        </div>
                                </div>

                                <div class="row">
                                        <div class="col-md-6">
                                                <form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
                                                        <h2>Données biologiques</h2>
                                                        
                                                        <input id="referentiel" type="hidden" value="bdtfx" />
                                                        <div id="taxon-liste-input-groupe" class="form-group has-tooltip"
                                                                title="Sélectionnez une espèce dans la liste déroulante par son nom latin
                                                                ou commun. Si une espèce est absente, sélectionnez «Autre espèce»." >
                                                                <label for="taxon-liste" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Espèce
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <div class="input-group">
                                                                                <select id="taxon-liste" name="taxon-liste" class="form-control">
                                                                                        <option value="" selected>Sélectionner une espèce</option>

                                                                                        <optgroup id="taxon-liste-noms">
                                                                                                <?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
                                                                                                        <option
                                                                                                                class="<?=$taxon['nom_type'] ?>"
                                                                                                                value="<?=$taxon['num_nom'] ?>"
                                                                                                                title="<?=$taxon['nom_title'] ?>"
                                                                                                                data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
                                                                                                                >
                                                                                                                <?=$taxon['nom_a_afficher']?>
                                                                                                        </option>
                                                                                                <?php endforeach; ?>
                                                                                        </optgroup>
                                                                                        <optgroup id="taxon-liste-special">
                                                                                                <?php foreach ($taxons['speciaux'] as $taxon) :?>
                                                                                                        <option
                                                                                                                class="<?=$taxon['nom_type'] ?>"
                                                                                                                value="<?=$taxon['num_nom'] ?>"
                                                                                                                title="<?=$taxon['nom_title'] ?>"
                                                                                                                data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
                                                                                                                >
                                                                                                                <?=$taxon['nom_a_afficher']?>
                                                                                                        </option>
                                                                                                <?php endforeach; ?>
                                                                                                <option value="?">Autre espèce</option>
                                                                                        </optgroup>
                                                                                </select>
                                                                        </div>
                                                                </div>
                                                        </div>

                                                        <div id="taxon-input-groupe" class="form-group has-tooltip hidden"
                                                                title="Vous pouvez saisir ici un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
                                                                <label for="taxon" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Autre espèce
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <input id="taxon" name="taxon" type="text" class="form-control"
                                                                                placeholder="Autre espèce (ou indication sur la plante)"
                                                                                value="<?= $nom_sci_espece_defaut; ?>" />
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Êtes-vous sûre de l’identification de l’espèce ?">
                                                                <label for="certitude" class="col-sm-4 control-label">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Identification de l'espèce
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <select id="certitude" class="form-control" name="certitude">
                                                                                <option selected value="">Sélectionner une certitude</option>
                                                                                <option value="Certaine">Oui</option>
                                                                                <option value="Douteuse">À confirmer</option>
                                                                        </select>
                                                                </div>
                                                        </div>


                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez la classe de circonférence de l'arbre à 1,30m du sol.">
                                                                <label for="circonference" class="col-sm-4 control-label">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Circonférence
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <select id="circonference" class="form-control obs-chp-etendu"
                                                                                        name="arbreRemarquableClasseCirconference"
                                                                                        data-label="Classe de circonférence à 1,30 m du sol (en m)">
                                                                                <option selected value="">Sélectionner la circonférence (à 1,30m du sol)</option>
                                                                                <option value="Inférieure à 1 mètre">Inférieure à 1 mètre</option>
                                                                                <option value="Entre 1 et 2 mètres">Entre 1 et 2 mètres</option>
                                                                                <option value="Entre 2 et 3 mètres">Entre 2 et 3 mètres</option>
                                                                                <option value="Supérieure à 3m">Supérieure à 3m</option>
                                                                                <option value="Je ne sais pas">Je ne sais pas</option>
                                                                        </select>
                                                                </div>
                                                        </div>
                                                        
                                                        <div class="form-group has-tooltip"
                                                                        title="Circonférence précise (si mesurée) à 1,30 m du sol (en mètre) ">
                                                                <label for="circonferencer" class="col-sm-4 control-label">
                                                                        Circonférence précise (si mesurée) à 1,30 m du sol (m) 
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <input id="circonferencer" type="number" step="0.01" min="0" class="form-control obs-chp-etendu"
                                                                                        name="arbreRemarquableCirconference"
                                                                                        data-label="Circonférence précise"
                                                                                        value="" />
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez la hauteur.">
                                                                <label for="hauteur" class="col-sm-4 control-label">
                                                                        Hauteur (m)
                                                                </label>
                                                                <div class="col-sm-8 input-group" id="hauteur">
                                                                        <span class="col-sm-4">
                                                                                <input id="hauteurNbr" type="number" step="0.01" min="0" class="form-control obs-chp-etendu"
                                                                                        name="arbreRemarquableHauteur"
                                                                                        data-label="Hauteur de l'arbre"
                                                                                        value="" />
                                                                        </span>
                                                                        <div class="col-sm-8">
                                                                                <select id="hauteurPrec" class="form-control obs-chp-etendu "
                                                                                                name="arbreRemarquableHauteurPrecision">
                                                                                        <option selected value="">Préciser le mode d'évaluation</option>
                                                                                        <option value="Évaluée">Évaluée</option>
                                                                                        <option value="Mesurée">Mesurée</option>
                                                                                </select>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                        
                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez l'âge.">
                                                                <label for="age" class="col-sm-4 control-label">
                                                                        Âge
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <div class="input-group">
                                                                                <select id="age" class="form-control obs-chp-etendu col-sm-6"
                                                                                                name="arbreRemarquableAge"
                                                                                                data-label="Age">
                                                                                        <option selected value="">Sélectionner l'âge</option>
                                                                                        <option value="Très vieux">Très vieux</option>
                                                                                        <option value="Vieux">Vieux</option>
                                                                                        <option value="Adulte">Adulte</option>
                                                                                </select>
                                                                                <div class="input-group-btn">
                                                                                        <button class="btn btn-default" type="button" data-toggle="modal" data-target="#age-description">
                                                                                                <span class="glyphicon glyphicon-info-sign"></span> Aide
                                                                                        </button>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                        
                                                        <div class="form-group has-tooltip" title="Indiquez la santé de l'arbre.">
                                                                <label for="sante" class="col-sm-4 control-label">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Santé
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <div class="input-group">
                                                                                <select id="sante" class="form-control obs-chp-etendu col-sm-6"
                                                                                                name="arbreRemarquableSante"
                                                                                                data-label="sante">
                                                                                        <option selected value="">Sélectionner l'état de santé</option>
                                                                                        <option value="En très bonne santé">En très bonne santé</option>
                                                                                        <option value="En bonne santé">En bonne santé</option>
                                                                                        <option value="État moyen">État moyen</option>
                                                                                        <option value="Fin de vie">Fin de vie</option>
                                                                                </select>
                                                                                <div class="input-group-btn">
                                                                                        <button class="btn btn-default" type="button" data-toggle="modal" data-target="#sante-description">
                                                                                                <span class="glyphicon glyphicon-info-sign"></span> Aide
                                                                                        </button>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez si des cavités sont présentes sur l'arbre.">
                                                                <label for="cavites" class="col-sm-4 control-label">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Cavités
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <select id="cavites" class="form-control obs-chp-etendu"
                                                                                        name="arbreRemarquablePresenceCavite"
                                                                                        data-label="Présence de cavités">
                                                                                <option selected value="">Sélectionner la présence de cavités</option>
                                                                                <option value="Absence">Absence</option>
                                                                                <option value="Présence de cavités">Présence de cavités</option>
                                                                                <option value="Je ne sais pas">Je ne sais pas</option>
                                                                        </select>
                                                                </div>
                                                        </div>
                                                </form>
                                                <form id="form-situation" class="form-horizontal" role="form" autocomplete="on">
                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez la situation de l'arbre remarquable.">
                                                                <label for="situation" class="col-sm-4 control-label">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Contexte, situation :
                                                                </label>
                                                                <div id="situation-controls" class="col-sm-8">
                                                                        <div class="btn-group dropdown">
                                                                                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                                                        Sélectionner une ou plusieurs situations
                                                                                        <span class="caret"></span>
                                                                                </button>
                                                                        
                                                                                <ul class="dropdown-menu col-sm-12" role="menu" aria-labelledby="dLabel">
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="situation-ch" class="cb-situation" type="checkbox" value="Arbre isolé"/>
                                                                                                                Arbre isolé
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="situation-ch" class="cb-situation" type="checkbox" value="Arbre dans l'espace public"/>
                                                                                                                Arbre dans l'espace public
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="situation-ch" class="cb-situation" type="checkbox" value="Arbre dans un jardin privé"/>
                                                                                                                Arbre dans un jardin privé
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="situation-ch" class="cb-situation" type="checkbox" value="Arbre en forêt"/>
                                                                                                                Arbre en forêt
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="situation-ch" class="cb-situation" type="checkbox" value="Arbre en espace agricole (champ, haie...)"/>
                                                                                                                Arbre en espace agricole (champ, haie...)
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="situation-ch" class="cb-situation" type="checkbox" value="Arbre en falaise, terrain escarpé"/>
                                                                                                                Arbre en falaise, terrain escarpé
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input id="situation-autre" name="situation-ch" class="cb-situation" type="checkbox" value="Autre"/>
                                                                                                                Autre
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                </ul>
                                                                        </div>
                                                                </div>
                                                        </div>

                                                        <div id="autre-situation-id" class="form-group has-tooltip hidden" >
                                                                <label for="autre-situation" class="col-sm-4 control-label">
                                                                        Autre :
                                                                </label>
                                                                <div class="col-sm-4">
                                                                        <input id="autre-situation" type="text" class="form-control"
                                                                                name="arbreRemarquableSituationAutre"
                                                                                data-label=""
                                                                                value="" />
                                                                </div>
                                                        </div>
                                                        <div class="row">
                                                                <div class="col-md-12">
                                                                        <h2 class="input-group">Notes<span class="input-group-btn">
                                                                                        <button class="btn btn-default" type="button" data-toggle="modal" data-target="#notes-description">
                                                                                                <span class="glyphicon glyphicon-info-sign"></span> Aide
                                                                                        </button>
                                                                                </span></h2>
                                                                        <textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
                                                                                placeholder="Observation d’espèces de faune ou de flore (notamment épiphytes), ressources potentielles pour la biodiversité."></textarea>
                                                                </div>
                                                        </div>
                                                </form>
                                        </div>
                                        
                                        
                                        
                                        

                                        <div class="col-md-6">
                                                <form id="form-criteres" class="form-horizontal" role="form" autocomplete="on">
                                                        <h2>Critères ressentis</h2>

                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez la situation de l'arbre remarquable.">
                                                                <label for="esthetique-ch" class="col-sm-4 control-label">
                                                                        Intérêt esthétique
                                                                </label>
                                                                <div id="situation-controls" class="col-sm-8">
                                                                        <div class="btn-group dropdown">
                                                                                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                                                                        Sélectionner le(s) type(s) d'intérêt esthétique
                                                                                        <span class="caret"></span>
                                                                                </button>
                                                                        
                                                                                <ul class="dropdown-menu col-sm-12" role="menu" aria-labelledby="dLabel">
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="esthetique-ch" class="cb-esthetique" type="checkbox" value="Forme humaine ou animale"/>
                                                                                                                Forme humaine ou animale
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="esthetique-ch" class="cb-esthetique" type="checkbox" value="Arbre têtard"/>
                                                                                                                Arbre têtard
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="esthetique-ch" class="cb-esthetique" type="checkbox" value="Forme d’abri ou de voûte"/>
                                                                                                                Forme d’abri ou de voûte
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="esthetique-ch" class="cb-esthetique" type="checkbox" value="Aspect enlacé, soudé"/>
                                                                                                                Aspect enlacé, soudé
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="esthetique-ch" class="cb-esthetique" type="checkbox" value="Aspect tortueux, tourmenté"/>
                                                                                                                Aspect tortueux, tourmenté
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input name="esthetique-ch" class="cb-esthetique" type="checkbox" value="Port pleureur"/>
                                                                                                                Port pleureur
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                        <li class="checkbox" role="presentation">
                                                                                                <a role="menuitem">
                                                                                                        <label>
                                                                                                                <input id="esthetique-autre" name="esthetique-ch" class="cb-esthetique" type="checkbox" value="Autre"/>
                                                                                                                Autre
                                                                                                        </label>
                                                                                                </a>
                                                                                        </li>
                                                                                </ul>
                                                                        </div>
                                                                </div>
                                                        </div>

                                                        <div id="autre-esthetique-id" class="form-group has-tooltip hidden" >
                                                                <label for="autre-esthetique" class="col-sm-4 control-label">
                                                                        Autre :
                                                                </label>
                                                                <div class="col-sm-4">
                                                                        <input id="autre-esthetique" type="text" class="form-control"
                                                                                name="arbreRemarquableEsthetique"
                                                                                data-label=""
                                                                                value="" />
                                                                </div>
                                                        </div>
                                                        
                                                        
                                                        <div class="form-group">
                                                                <label for="historique" class="col-sm-4 control-label">
                                                                L’arbre a-t-il un intérêt historique / patrimonial ?
                                                                </label>
                                                                        <textarea id="historique" class="col-sm-7 obs-chp-etendu text-area" rows="2" name="arbreRemarquableHistorique"
                                                                                placeholder="Laisser vide si inconnu."></textarea>
                                                                
                                                        </div>
                                                </form>
                                                <form id="form-remarquable" class="form-horizontal" role="form" autocomplete="on">
                                                <!-- Type remarquable -->
                                                        <div class="row-fluid">
                                                                <div class="form-group"> 
                                                                        <label class="col-sm-4 control-label pointer">
                                                                                <span class="has-tooltip pointer">
                                                                                        <strong class="obligatoire">*Pourquoi cet individu vous semble-t-il remarquable ?</strong>
                                                                                </span>
                                                                        </label>
                                                                        <div class="col-sm-8 control-group">
                                                                                <!-- Intérêt esthétique -->
                                                                                <div class="input-group">
                                                                                        <label for="remarquable-esthetique">
                                                                                                <input type="checkbox" id="remarquable-esthetique" class="cb-remarquable" name="remarquable-ch" value="esthétique" data-titre="esthétique" />
                                                                                                Intérêt esthétique
                                                                
                                                                                        </label>
                                                                                </div>
                                                                                <!-- Intérêt historique local -->
                                                                                <div class="input-group">
                                                                                        <label for="remarquable-historique">
                                                                                                <input type="checkbox" id="remarquable-historique" class="cb-remarquable" name="remarquable-ch" value="historique" data-titre="historique" />
                                                                                                Intérêt historique local
                                                                                                
                                                                                        </label>
                                                                                </div>
                                                                                <!-- Intérêt biologique, refuge de biodiversité -->
                                                                                <div class="input-group">
                                                                                        <label for="remarquable-biologique">
                                                                                                <input type="checkbox" id="remarquable-biologique" class="cb-remarquable" name="remarquable-ch" value="biologique" data-titre="biologique" />
                                                                                                Intérêt biologique, refuge de biodiversité
                                                                                                <input class="has-tooltip hidden" type="text" id="remarquable-biologique-commentaire"
                                                                                                        placeholder="commentaire optionnel" 
                                                                                                />
                                                                                        </label>
                                                                                </div>
                                                                                <!-- Grand âge -->
                                                                                <div class="input-group">
                                                                                        <label for="remarquable-age">
                                                                                                <input type="checkbox" id="remarquable-age" class="cb-remarquable" name="remarquable-ch" value="age" data-titre="age" />
                                                                                                Grand âge
                                                                                                <input class="has-tooltip hidden" type="text" id="remarquable-age-commentaire"
                                                                                                        placeholder="commentaire optionnel" 
                                                                                                />
                                                                                        </label>
                                                                                </div>
                                                                                <!-- Taille importante -->
                                                                                <div class="input-group">
                                                                                        <label for="remarquable-taille">
                                                                                                <input type="checkbox" id="remarquable-taille" class="cb-remarquable" name="remarquable-ch" value="taille" data-titre="taille" />
                                                                                                Taille importante
                                                                                                <input class="has-tooltip hidden" type="text" id="remarquable-taille-commentaire"
                                                                                                        placeholder="commentaire optionnel" 
                                                                                                />
                                                                                        </label>
                                                                                </div>
                                                                                <!-- Autre -->
                                                                                <div class="input-group">
                                                                                        <label for="remarquable-autre">
                                                                                                <input type="checkbox" id="remarquable-autre" class="cb-remarquable" name="remarquable-ch" value="autre" data-titre="autre" />
                                                                                                Autre
                                                                                                <input class="has-tooltip hidden" type="text" id="remarquable-autre-commentaire"
                                                                                                        placeholder="commentaire optionnel" 
                                                                                                />
                                                                                        </label>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </form>
                                                <form id="form-remarquabilite" class="form-horizontal" role="form" autocomplete="on">
                                                        <div class="form-group has-tooltip"
                                                                        title="Quel est le degré de remarquabilité de cet arbre ?">
                                                                <label for="remarquabilite" class="col-sm-4 control-label">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Selon vous, quel est le degré de remarquabilité de cet arbre ?
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <div class="input-group">
                                                                                <select id="remarquabilite" class="form-control obs-chp-etendu"
                                                                                                name="arbreRemarquableRemarquabilite"
                                                                                                data-label="Remarquabilite">
                                                                                        <option selected value="">Sélectionner le degré de remarquabilité</option>
                                                                                        <option value="Arbre exceptionnel">Arbre exceptionnel</option>
                                                                                        <option value="Arbre remarquable">Arbre remarquable</option>
                                                                                        <option value="Arbre d'intérêt local">Arbre d'intérêt local</option>
                                                                                </select>
                                                                                <div class="input-group-btn">
                                                                                        <button class="btn btn-default" type="button" data-toggle="modal" data-target="#remarq-description">
                                                                                                <span class="glyphicon glyphicon-info-sign"></span> Aide
                                                                                        </button>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </form>

                                                <div class="row">
                                                        <form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
                                                                method="post" enctype="multipart/form-data">
                                                                <div class="col-md-12">
                                                                        <h2>Image(s) de l'arbre</h2>
                                                                        <strong>Ajouter une image</strong>
                                                                        <p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
                                                                        <div id ="photos-conteneur" class="form-group">
                                                                                <div class="col-sm-12">
                                                                                        <input type="file" id="fichier" name="fichier" class="form-control import-image" accept="image/jpeg" />
                                                                                        <input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
                                                                                </div>
                                                                                <div id="miniatures"></div>
                                                                                <p class="miniature-msg col-md-12">&nbsp;</p>
                                                                        </div>
                                                                </div>
                                                        </form>
                                                </div>
                                        </div>
                                </div>

                                <div class="row">
                                        <div class="col-md-12 centre has-tooltip"
                                                title="Une fois les champs remplis, cliquez sur ce bouton pour
                                                        ajouter votre observation à la liste à transmettre. N'oubliez pas de cliquer sur le bouton transmettre pour envoyer vos observations.">
                                                <button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
                                                        Créer
                                                </button>
                                        </div>
                                </div>
                        </div>

                        <!-- Messages d'erreur du formulaire-->
                        <div class="row">
                                <div class="zone-alerte col-md-6 col-md-offset-3">
                                        <div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
                                                <a class="close">×</a>
                                                <h4 class="alert-heading">Information : 10 observations maximum</h4>
                                                <p>
                                                        Vous venez d'ajouter votre 10ème observation.<br/>
                                                        Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
                                                </p>
                                        </div>
                                </div>
                                <div class="zone-alerte col-md-6 col-md-offset-3">
                                        <div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
                                                <a class="close">×</a>
                                                <h4 class="alert-heading">Information : champs en erreur</h4>
                                                <p>
                                                        Certains champs du formulaire sont mal remplis.<br/>
                                                        Veuillez vérifier vos données.
                                                </p>
                                        </div>
                                </div>
                        </div>

                        <!-- Affiche le tableau récapitulatif des observations ajoutées -->
                        <div id="zone-liste-obs" class="row">
                                <div class="col-md-12">
                                        <div class="well well-lg">
                                                <div class="row">
                                                        <div class="col-md-8">
                                                                <h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
                                                        </div>
                                                        <div class="col-md-4 text-right">
                                                                <button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
                                                                        type="button" disabled="disabled"
                                                                        title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
                                                                        Transmettre
                                                                </button>
                                                        </div>
                                                </div>
                                                <div id="liste-obs" ></div>
                                                <div class="row">
                                                        <div class="zone-alerte col-md-6 col-md-offset-3">
                                                                <div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
                                                                        <a class="close">×</a>
                                                                        <h4 class="alert-heading">Attention : aucune observation</h4>
                                                                        <p>Veuillez saisir des observations pour les transmettre.</p>
                                                                </div>

                                                                <div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
                                                                        <a class="close">×</a>
                                                                        <h4 class="alert-heading">Information : transmission des observations</h4>
                                                                        <div class="alert-txt"></div>
                                                                </div>

                                                                <div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
                                                                        <a class="close">×</a>
                                                                        <h4 class="alert-heading">Erreur : transmission des observations</h4>
                                                                        <div class="alert-txt"></div>
                                                                </div>
                                                        </div>
                                                </div>

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

                        <footer class="row">
                                <p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
                        </footer>

                        <!-- Templates HTML -->
                        <div id="tpl-transmission-ok" style="display:none;">
                                <p class="msg">
                                        Vos observations ont bien été transmises.<br />
                                        Elles sont désormais consultables à travers les différents outils de visualisation
                                        du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
                                        <a href="http://www.tela-botanica.org/appli:pictoflora">Pictoflora</a>,
                                        <a href="http://www.tela-botanica.org/appli:del">Identiplante</a>,
                                        <a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
                                        Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
                                        connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en Ligne</a>.<br />
                                        N'oubliez pas qu'il est nécessaire de
                                        <a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
                                        au préalable, si ce n'est pas déjà fait.
                                </p>
                        </div>
                        <div id="tpl-transmission-ko" style="display:none;">
                                <p class="msg">
                                        Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
                                        Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
                                        et transmettre les suivantes.<br />
                                        Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
                                        Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
                                        <a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
                                                                  target="_blank"
                                                                  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
                                                                  le formulaire de signalement d'erreurs</a>.
                                </p>
                        </div>

                        <!-- Fenêtres modales -->
                        <div id="chargement" class="modal-fenetre" style="display:none;">
                                <div id="chargement-centrage" class="modal-contenu">
                                        <div class="progress">
                                                <div id="barre-progression-upload" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
                                                        <span class="sr-only">0/10 observations transmises</span>
                                                </div>
                                        </div>

                                        <p id="chargement-txt" style="color:white;font-size:1.5em;">
                                                Transfert des observations en cours...<br />
                                                Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
                                                d'observations à transférer.
                                        </p>
                                </div>
                        </div>

                        <div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
                                 aria-labelledby="projet-description-titre" aria-hidden="true">
                                <div class="modal-dialog">
                                        <div class="modal-content">
                                                <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                                        </button>
                                                        <h1 id="projet-description-titre" class="modal-title">Les arbres remarquables</h1>
                                                </div>
                                                <div class="modal-body">
                                                        <div class="dsc-imgs">
                                                                <img src="<?=$url_base?>/modules/saisie/squelettes/arbres-remarquables/img/dsc/arbre_1.jpg" alt="Illustration d'un arbre remarquable"/>
                                                        </div>
                                                        <div class="dsc-infos text-justify">
                                                                <h2>Qu'est-ce qu'un arbre remarquable&nbsp;?</h2>
                                                                <p>
                                                                        Parmi les arbres que nous côtoyons, certains sujets suscitent une émotion particulière de par 
                                                                        leur taille imposante, leur forme, leur grand âge, leur rareté botanique, leur capacité à offrir 
                                                                        des refuges à la faune, leur histoire… <br />
                                                                        La notion de « remarquabilité » comporte une part de subjectivité liée à l’appréciation 
                                                                        personnelle et une part de relativité (un arbre paraît d'autant plus remarquable que son 
                                                                        environnement est banal).
                                                                </p>

                                                                <h2>Des rescapés de la gestion humaine</h2>
                                                                <p>
                                                                        Ces « anciens » nous rappellent que les arbres ont une capacité à vivre beaucoup plus longtemps 
                                                                        que les limites que nous leur imposons généralement. Des rescapés en quelque sorte !<br />
                                                                        Les forestiers récoltent les arbres alors qu'ils n'ont pas atteint la moitié de leur vie ; 
                                                                        hors de forêts, l'arrachement des haies et l'urbanisation laissent peu d'occasion aux arbres de 
                                                                        vieillir.
                                                                </p>

                                                                <h2>Pourquoi est-il important de les recenser&nbsp;?</h2>
                                                                <p>
                                                                        Outre les considérations morales et philosophiques qui doivent nous inciter à les protéger, 
                                                                        les vieux arbres représentent un écosystème particulier : écorces décollées, branches mortes, 
                                                                        cavités sont autant de milieux de vie pour des espèces d'insectes, champignons, oiseaux, 
                                                                        de mammifères…<br />
                                                                        Les gestions agricoles et forestières plus intensives ont pour conséquence la raréfaction des 
                                                                        arbres âgés ; elles menacent toute la vie qui leur est associée.<br />
                                                                        Pour la biodiversité, l'identification et la protection des vieux arbres est cruciale ; d'un 
                                                                        point de vu paysager, ces arbres représentent des éléments remarquables auxquels les habitants 
                                                                        sont attachés.
                                                                </p>
                                                                <p class="bg-success text-center">
                                                                        <strong>
                                                                                Merci de transmettre vos observations
                                                                        </strong>
                                                                </p>
                                                        </div>
                                                </div>
                                                <div class="modal-footer dsc-clean">
                                                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
                                                </div>
                                        </div>
                                </div>
                        </div>

                        <div id="age-description" class="modal fade" tabindex="-1" role="dialog"
                                 aria-labelledby="age-description-titre" aria-hidden="true">
                                <div class="modal-dialog">
                                        <div class="modal-content">
                                                <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                                        </button>
                                                </div>
                                                <div class="modal-body">
                                                        <p>
                                                                Le comptage des cernes de croissance est une manière aisée de connaître l'âge d'un arbre une fois abattu 
                                                                mais sur un individu vivant c'est beaucoup plus difficile à estimer.<br />
                                                                La taille, notamment, n'est pas toujours un critère (les genévriers thurifères qui poussent en falaise 
                                                                n’atteignent pas de grandes dimension tout en pouvant être âgés). <br />
                                                                Quelques signes peuvent vous aider :
                                                        </p>
                                                        <table class="table table-bordered">
                                                                <tr>
                                                                        <td>Très vieux</td>
                                                                        <td><strong>Période de retraite</strong><br />
                                                                                Porte-t-il des signes de grand âge ?<br />
                                                                                <i>Ex : contreforts marqués, dessèchement des feuilles à la cime</i>
                                                                        </td>
                                                                </tr>
                                                                <tr>
                                                                        <td>Vieux</td>
                                                                        <td><strong>Période de sénescence - Post reproduction</strong><br />
                                                                                Porte-t-il des signes de vieillissement ?<br />
                                                                                <i>Ex : arrêt de fructification, apparition de contreforts</i>
                                                                        </td>
                                                                </tr>
                                                                <tr>
                                                                        <td>Adulte</td>
                                                                        <td><strong>Période de maturité</strong><br />
                                                                                Porte-t-il des fruits ?
                                                                        </td>
                                                                </tr>
                                                        </table>
                                                </div>
                                                <div class="modal-footer dsc-clean">
                                                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        
                        <div id="sante-description" class="modal fade" tabindex="-1" role="dialog"
                                 aria-labelledby="age-description-titre" aria-hidden="true">
                                <div class="modal-dialog">
                                        <div class="modal-content">
                                                <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                                        </button>
                                                </div>
                                                <div class="modal-body">
                                                        <table class="table table-bordered">
                                                                <tr>
                                                                        <td>En très bonne santé</td>
                                                                        <td>Arbre sain et vigoureux.</td>
                                                                </tr>
                                                                <tr>
                                                                        <td>En bonne santé</td>
                                                                        <td>Au plus quelques atteintes (petites blessures, petites branches sèches).</td>
                                                                </tr>
                                                                <tr>
                                                                        <td>État moyen</td>
                                                                        <td>L'arbre a subi la foudre, des élagages, des brûlures, des gerçures de froid, la maladie…</td>
                                                                </tr>
                                                                <tr>
                                                                        <td>Fin de vie</td>
                                                                        <td>Atteintes pouvant affecter la solidité : cavité(s) importante(s), grande proportion de branches mortes ; système racinaire fortement endommagé...</td>
                                                                </tr>
                                                        </table>
                                                </div>
                                                <div class="modal-footer dsc-clean">
                                                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        
                        <div id="remarq-description" class="modal fade" tabindex="-1" role="dialog"
                                 aria-labelledby="age-description-titre" aria-hidden="true">
                                <div class="modal-dialog">
                                        <div class="modal-content">
                                                <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                                        </button>
                                                </div>
                                                <div class="modal-body">
                                                        <table class="table table-bordered">
                                                                <tr>
                                                                        <td>Arbre exceptionnel</td>
                                                                        <td>Le caractère exceptionnel de l'arbre le place à une échelle nationale.</td>
                                                                </tr>
                                                                <tr>
                                                                        <td>Arbre remarquable </td>
                                                                        <td>L'arbre est remarquable à une échelle régionale.</td>
                                                                </tr>
                                                                <tr>
                                                                        <td>Arbre exceptionnel</td>
                                                                        <td>Arbre d’intérêt principalement local (histoire locale, légende locale, paysage local...)</td>
                                                                </tr>
                                                        </table>
                                                </div>
                                                <div class="modal-footer dsc-clean">
                                                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
                                                </div>
                                        </div>
                                </div>
                        </div>
                        
                        <div id="notes-description" class="modal fade" tabindex="-1" role="dialog"
                                 aria-labelledby="projet-description-titre" aria-hidden="true">
                                <div class="modal-dialog">
                                        <div class="modal-content">
                                                <div class="modal-header">
                                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                                <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                                                        </button>
                                                        <h1 id="projet-description-titre" class="modal-title">Notes</h1>
                                                        <p>Observation d’espèces de faune ou de flore (notamment épiphytes), ressources potentielles pour la biodiversité. </p>
                                                </div>
                                                <div class="modal-body">
                                                        <div class="dsc-infos text-justify">
                                                                <h2>Qu'est-ce qu'une plante épiphyte&nbsp;?</h2>
                                                                <p>
                                                                        Il s'agit d'une plante qui pousse en se servant d'autres plantes comme support. Il ne s'agit 
                                                                        pas de plantes parasites mais de plantes qui trouvent un substrat favorable sur l'arbre, soit dans 
                                                                        des cavités remplies de terreau, soit sur l'écorce du tronc.
                                                                </p>
                                                        </div>
                                                        <div class="dsc-imgs">
                                                                <img src="<?=$url_base?>/modules/saisie/squelettes/arbres-remarquables/img/dsc/arbre_2.jpg" 
                                                                alt="Plantes épiphytes By pfly (flickr.com) [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/>
                                                                <p>By pfly (flickr.com) [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons</p>
                                                        </div>
                                                </div>
                                                <div class="modal-footer dsc-clean">
                                                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
                                                </div>
                                        </div>
                                </div>
                        </div>


                </div>
        </body>
</html>