Subversion Repositories eFlore/Applications.cel

Rev

Rev 2993 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 2993 Rev 2996
1
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="fr">
2
<html lang="fr">
3
	<head>
3
	<head>
4
		<title>Arbres têtards : saisie d'observations</title>
4
		<title>Arbres têtards : saisie d'observations</title>
5
 
5
 
6
		<meta charset="utf-8">
6
		<meta charset="utf-8">
7
 
7
 
8
		<meta name="revisit-after" content="15 days" />
8
		<meta name="revisit-after" content="15 days" />
9
		<meta name="robots" content="index,follow" />
9
		<meta name="robots" content="index,follow" />
10
		<meta name="author" content="Jean-Pascal MILCENT" />
10
		<meta name="author" content="Jean-Pascal MILCENT" />
11
		<meta name="keywords" content="Arbres têtards, projet, saisie, observation, Gentiana, CEL" />
11
		<meta name="keywords" content="Arbres têtards, projet, saisie, observation, Gentiana, CEL" />
12
		<meta name="description" content="Projet Arbres têtards de Gentiana - Widget de saisie simplifiée pour le CEL" />
12
		<meta name="description" content="Projet Arbres têtards de Gentiana - Widget de saisie simplifiée pour le CEL" />
13
 
13
 
14
		<!-- Viewport Mobile -->
14
		<!-- Viewport Mobile -->
15
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
15
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
16
 
16
 
17
		<!-- Favicones -->
17
		<!-- Favicones -->
18
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/favicon.ico" />
18
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/favicon.ico" />
19
 
19
 
20
		<!-- Javascript : bibliothèques -->
20
		<!-- Javascript : bibliothèques -->
21
		<!-- Google Map v3 -->
21
		<!-- Google Map v3 -->
22
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
22
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
23
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
23
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
24
		<!-- Proj4js -->
24
		<!-- Proj4js -->
25
		<script type="text/javascript" src="https://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
25
		<script type="text/javascript" src="https://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
26
 
26
 
27
		<!-- Jquery -->
27
		<!-- Jquery -->
28
		<script src="https://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
28
		<script src="https://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
29
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
29
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
30
		<script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
30
		<script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
31
		<script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
31
		<script src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
32
		<!-- Jquery Plugins -->
32
		<!-- Jquery Plugins -->
33
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
33
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
34
		<script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
34
		<script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
35
		<script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
35
		<script src="https://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
36
		<!-- Jquery Form :nécessaire pour l'upload des images -->
36
		<!-- Jquery Form :nécessaire pour l'upload des images -->
37
		<script src="https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
37
		<script src="https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
38
		<!-- Bootstrap -->
38
		<!-- Bootstrap -->
39
		<script src="https://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
39
		<script src="https://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
40
 
40
 
41
		<!-- Javascript : appli saisie -->
41
		<!-- Javascript : appli saisie -->
42
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
42
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
43
		<script src="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/js/WidgetSaisieArbresTetards.js"></script>
43
		<script src="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/js/WidgetSaisieArbresTetards.js"></script>
44
		<script src="<?=$url_base?>saisie?projet=arbres-tetards&amp;service=taxons" type="text/javascript"></script>
44
		<script src="<?=$url_base?>saisie?projet=arbres-tetards&amp;service=taxons" type="text/javascript"></script>
45
		<script>
45
		<script>
46
		//<![CDATA[
46
		//<![CDATA[
47
           $(document).ready(function() {
47
           $(document).ready(function() {
48
				// OMG un modèle objet !!
48
				// OMG un modèle objet !!
49
				var widget = new WidgetSaisieArbresTetards();
49
				var widget = new WidgetSaisieArbresTetards();
50
 
50
 
51
				// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
51
				// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
52
				widget.taxons = taxons;
52
				widget.taxons = taxons;
53
 
53
 
54
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
54
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
55
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
55
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
56
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
56
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
57
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
57
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
58
				// Mot-clé du widget/projet
58
				// Mot-clé du widget/projet
59
				widget.tagProjet = "WidgetSaisie,ArbresTetards";
59
				widget.tagProjet = "WidgetSaisie,ArbresTetards";
60
				// Mots-clés à ajouter aux images
60
				// Mots-clés à ajouter aux images
61
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
61
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
62
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
62
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
63
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
63
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
64
				// Mots-clés à ajouter aux observations
64
				// Mots-clés à ajouter aux observations
65
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
65
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
66
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
66
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
67
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
67
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
68
				// Précharger le formulaire avec les infos d'une observation
68
				// Précharger le formulaire avec les infos d'une observation
69
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
69
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
70
				// URL du web service réalisant l'insertion des données dans la base du CEL.
70
				// URL du web service réalisant l'insertion des données dans la base du CEL.
71
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
71
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
72
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
72
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
73
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
73
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
74
				// Code du référentiel utilisé pour les nom scientifiques.
74
				// Code du référentiel utilisé pour les nom scientifiques.
75
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
75
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
76
				// Indication de la présence d'une espèce imposée
76
				// Indication de la présence d'une espèce imposée
77
				widget.especeImposee = "<?=$espece_imposee; ?>";
77
				widget.especeImposee = "<?=$espece_imposee; ?>";
78
				// Tableau d'informations sur l'espèce imposée
78
				// Tableau d'informations sur l'espèce imposée
79
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
79
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
80
				// Nombre d'élément dans les listes d'auto-complétion
80
				// Nombre d'élément dans les listes d'auto-complétion
81
				widget.autocompletionElementsNbre = 20;
81
				widget.autocompletionElementsNbre = 20;
82
 
82
 
83
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
83
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
84
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
84
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
85
					"masque={masque}&"+
85
					"masque={masque}&"+
86
					"recherche=etendue&"+
86
					"recherche=etendue&"+
87
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
87
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
88
					"retour.tri=alpharet&"+ // tri "à la CeL"
88
					"retour.tri=alpharet&"+ // tri "à la CeL"
89
					"ns.structure=au"+"&"+
89
					"ns.structure=au"+"&"+
90
					"navigation.limite=" + widget.autocompletionElementsNbre;
90
					"navigation.limite=" + widget.autocompletionElementsNbre;
91
				// Nombre d'observations max autorisé avant transmission
91
				// Nombre d'observations max autorisé avant transmission
92
				widget.obsMaxNbre = 10;
92
				widget.obsMaxNbre = 10;
93
				// Durée d'affichage en milliseconde des messages d'informations
93
				// Durée d'affichage en milliseconde des messages d'informations
94
				widget.dureeMessage = 15000;
94
				widget.dureeMessage = 15000;
95
				// Squelette d'URL du web service de l'annuaire.
95
				// Squelette d'URL du web service de l'annuaire.
96
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
96
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
97
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
97
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
98
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
98
				widget.serviceNomCommuneUrl = "https://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
99
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
99
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
100
				widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
100
				widget.serviceNomCommuneUrlAlt = "https://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
101
				// Squelette d'URL du web service d'eFlore fournissant l'altitude
101
				// Squelette d'URL du web service d'eFlore fournissant l'altitude
102
				widget.serviceAltitudeUrl = "http://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
102
				widget.serviceAltitudeUrl = "https://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
103
				// URL du marqueur à utiliser dans la carte Google Map
103
				// URL du marqueur à utiliser dans la carte Google Map
104
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/marqueurs/epingle.png";
104
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/marqueurs/epingle.png";
105
				// URL de l'icône du chargement en cours
105
				// URL de l'icône du chargement en cours
106
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement.gif";
106
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement.gif";
107
				// URL de l'icône du chargement en cours d'une image
107
				// URL de l'icône du chargement en cours d'une image
108
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement-image.gif";
108
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement-image.gif";
109
				// URL de l'icône du calendrier
109
				// URL de l'icône du calendrier
110
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/calendrier.png";
110
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/calendrier.png";
111
				// URL de l'icône pour une photo manquante
111
				// URL de l'icône pour une photo manquante
112
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/pasdephoto.png";
112
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/pasdephoto.png";
113
 
113
 
114
				// Initialisation du bousin
114
				// Initialisation du bousin
115
				widget.init();
115
				widget.init();
116
			});
116
			});
117
		//]]>
117
		//]]>
118
		</script>
118
		</script>
119
 
119
 
120
		<!-- CSS -->
120
		<!-- CSS -->
121
		<link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
121
		<link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
122
		<link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
122
		<link rel="stylesheet" href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
123
		<link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
123
		<link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
124
		<link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
124
		<link rel="stylesheet" href="https://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
125
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-tetards'?>.css" />
125
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-tetards'?>.css" />
126
 
126
 
127
		<!--  Google Analytics -->
127
		<!--  Google Analytics -->
128
		<?php if($prod): ?>
128
		<?php if($prod): ?>
129
			<?php include "analytics.html"; ?>
129
			<?php include "analytics.html"; ?>
130
		<?php endif; ?>
130
		<?php endif; ?>
131
	</head>
131
	</head>
132
 
132
 
133
	<body data-spy="scroll">
133
	<body data-spy="scroll">
134
		<div class="container">
134
		<div class="container">
135
			<div class="page-header">
135
			<div class="page-header">
136
				<h1>
136
				<h1>
137
					<img id="logo-titre" src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/logos/gentiana.png" alt="Gentiana" />
137
					<img id="logo-titre" src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/logos/gentiana.png" alt="Gentiana" />
138
					 Arbres têtards de l'Isère
138
					 Arbres têtards de l'Isère
139
				</h1>
139
				</h1>
140
			</div>
140
			</div>
141
			<div class="row">
141
			<div class="row">
142
				<div class="col-md-6">
142
				<div class="col-md-6">
143
					<div id="intro" class="well well-lg">
143
					<div id="intro" class="well well-lg">
144
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
144
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
145
							<h3 class="titre">
145
							<h3 class="titre">
146
								Le Projet «&nbsp;Arbres Têtards&nbsp;»
146
								Le Projet «&nbsp;Arbres Têtards&nbsp;»
147
								<span class="glyphicon glyphicon-plus-sign"></span>
147
								<span class="glyphicon glyphicon-plus-sign"></span>
148
							</h3>
148
							</h3>
149
						</a>
149
						</a>
150
						<div id="intro-txt" class="collapse in">
150
						<div id="intro-txt" class="collapse in">
151
							<p>
151
							<p>
152
								Les <a data-toggle="modal" data-target="#projet-description">arbres têtards ou trognes</a>,
152
								Les <a data-toggle="modal" data-target="#projet-description">arbres têtards ou trognes</a>,
153
								sont des arbres taillés exploités depuis des siècles. Par leur histoire et
153
								sont des arbres taillés exploités depuis des siècles. Par leur histoire et
154
								leur richesse écologique, ils font partie de notre patrimoine.<br />
154
								leur richesse écologique, ils font partie de notre patrimoine.<br />
155
								Victimes des changements de pratiques agricoles et de l’urbanisation des zones
155
								Victimes des changements de pratiques agricoles et de l’urbanisation des zones
156
								rurales, ces arbres remarquables disparaissent !
156
								rurales, ces arbres remarquables disparaissent !
157
							</p>
157
							</p>
158
							<p>
158
							<p>
159
								C’est pourquoi <a href="http://www.gentiana.org/" target="_blank">Gentiana</a>
159
								C’est pourquoi <a href="http://www.gentiana.org/" target="_blank">Gentiana</a>
160
								a lancé un programme de suivi, de sauvegarde et de restauration des arbres têtards
160
								a lancé un programme de suivi, de sauvegarde et de restauration des arbres têtards
161
								en Isère. Ce projet a pour but de mieux faire connaître ces arbres, de les entretenir,
161
								en Isère. Ce projet a pour but de mieux faire connaître ces arbres, de les entretenir,
162
								de restaurer ceux à l’abandon et d’en replanter.
162
								de restaurer ceux à l’abandon et d’en replanter.
163
							</p>
163
							</p>
164
							<p>
164
							<p>
165
								La première chose à faire est un état des lieux des arbres têtards sur tout le
165
								La première chose à faire est un état des lieux des arbres têtards sur tout le
166
								département de l’Isère.
166
								département de l’Isère.
167
								<strong>Nous avons besoin de vous pour améliorer notre connaissance !</strong><br />
167
								<strong>Nous avons besoin de vous pour améliorer notre connaissance !</strong><br />
168
								Vous pouvez nous aider en nous signalant les arbres têtards que vous connaissez
168
								Vous pouvez nous aider en nous signalant les arbres têtards que vous connaissez
169
								à l’aide du formulaire suivant.
169
								à l’aide du formulaire suivant.
170
							</p>
170
							</p>
171
						</div>
171
						</div>
172
					</div>
172
					</div>
173
				</div>
173
				</div>
174
 
174
 
175
				<div class="col-md-6">
175
				<div class="col-md-6">
176
					<div id="aide" class="well well-lg">
176
					<div id="aide" class="well well-lg">
177
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
177
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
178
							<h3 class="titre">
178
							<h3 class="titre">
179
								Aide
179
								Aide
180
								<span class="glyphicon glyphicon-plus-sign"></span>
180
								<span class="glyphicon glyphicon-plus-sign"></span>
181
							</h3>
181
							</h3>
182
						</a>
182
						</a>
183
						<div id="aide-txt" class="collapse in">
183
						<div id="aide-txt" class="collapse in">
184
							<p>
184
							<p>
185
								Cet outil vous permet de partager simplement vos observations avec
185
								Cet outil vous permet de partager simplement vos observations avec
186
								<a href="http://www.gentiana.org/" target="_blank">Gentiana</a> et le
186
								<a href="http://www.gentiana.org/" target="_blank">Gentiana</a> et le
187
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
187
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
188
								(sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
188
								(sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
189
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
189
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
190
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
190
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
191
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
191
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
192
								Elles apparaissent immédiatement sur les
192
								Elles apparaissent immédiatement sur les
193
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
193
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
194
							</p>
194
							</p>
195
							<p class="discretion">
195
							<p class="discretion">
196
								Pour toute question ou remarque,
196
								Pour toute question ou remarque,
197
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
197
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
198
									target="_blank"
198
									target="_blank"
199
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
199
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
200
									contactez-nous</a>
200
									contactez-nous</a>
201
							</p>
201
							</p>
202
							<p class="discretion">
202
							<p class="discretion">
203
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
203
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
204
								<button id="btn-aide" class="btn btn-xs btn-success">
204
								<button id="btn-aide" class="btn btn-xs btn-success">
205
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
205
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
206
									<span id="btn-aide-txt">Désactiver l'aide</span>
206
									<span id="btn-aide-txt">Désactiver l'aide</span>
207
								</button>
207
								</button>
208
							</p>
208
							</p>
209
						</div>
209
						</div>
210
					</div>
210
					</div>
211
				</div>
211
				</div>
212
			</div>
212
			</div>
213
 
213
 
214
			<div class="well well-lg">
214
			<div class="well well-lg">
215
				<h2>Observateur</h2>
215
				<h2>Observateur</h2>
216
				<form id="form-observateur" role="form" autocomplete="on">
216
				<form id="form-observateur" role="form" autocomplete="on">
217
					<div class="row">
217
					<div class="row">
218
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
218
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
219
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
219
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
220
								Si vous n'êtes pas inscrit ce n'est pas grave, vous pourrez le faire
220
								Si vous n'êtes pas inscrit ce n'est pas grave, vous pourrez le faire
221
								ultérieurement. Des informations complémentaires vont vous être
221
								ultérieurement. Des informations complémentaires vont vous être
222
								demandées : prénom et nom.">
222
								demandées : prénom et nom.">
223
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
223
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
224
								<strong class="obligatoire">*</strong>
224
								<strong class="obligatoire">*</strong>
225
								Courriel
225
								Courriel
226
							</label>
226
							</label>
227
							<div class="input-group">
227
							<div class="input-group">
228
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
228
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
229
								<input id="courriel" name="courriel" class="form-control" type="text"/>
229
								<input id="courriel" name="courriel" class="form-control" type="text"/>
230
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
230
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
231
							</div>
231
							</div>
232
						</div>
232
						</div>
233
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
233
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
234
							<label for="courriel_confirmation" title="Veuillez confirmer le courriel.">
234
							<label for="courriel_confirmation" title="Veuillez confirmer le courriel.">
235
								<strong class="obligatoire">*</strong> Courriel (confirmation)
235
								<strong class="obligatoire">*</strong> Courriel (confirmation)
236
							</label>
236
							</label>
237
							<div class="input-group">
237
							<div class="input-group">
238
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
238
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
239
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
239
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
240
							</div>
240
							</div>
241
						</div>
241
						</div>
242
					</div>
242
					</div>
243
					<div id="zone-prenom-nom" class="row hidden">
243
					<div id="zone-prenom-nom" class="row hidden">
244
						<div class="col-md-6 form-group">
244
						<div class="col-md-6 form-group">
245
							<label for="prenom">Prénom</label>
245
							<label for="prenom">Prénom</label>
246
							<div class="input-group">
246
							<div class="input-group">
247
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
247
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
248
								<input id="prenom" name="prenom" class="form-control" type="text"/>
248
								<input id="prenom" name="prenom" class="form-control" type="text"/>
249
							</div>
249
							</div>
250
						</div>
250
						</div>
251
						<div class="col-md-6 form-group">
251
						<div class="col-md-6 form-group">
252
							<label for="nom">Nom</label>
252
							<label for="nom">Nom</label>
253
							<div class="input-group">
253
							<div class="input-group">
254
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
254
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
255
								<input id="nom" name="nom" class="form-control" type="text"/>
255
								<input id="nom" name="nom" class="form-control" type="text"/>
256
							</div>
256
							</div>
257
						</div>
257
						</div>
258
					</div>
258
					</div>
259
				</form>
259
				</form>
260
			</div>
260
			</div>
261
 
261
 
262
			<!-- Messages d'erreur du formulaire-->
262
			<!-- Messages d'erreur du formulaire-->
263
			<div class="row">
263
			<div class="row">
264
				<div class="zone-alerte col-md-6 col-md-offset-3">
264
				<div class="zone-alerte col-md-6 col-md-offset-3">
265
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
265
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
266
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
266
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
267
						<h4 class="alert-heading">Information : copier/coller</h4>
267
						<h4 class="alert-heading">Information : copier/coller</h4>
268
						<p>
268
						<p>
269
							Merci de ne pas copier/coller votre courriel.<br/>
269
							Merci de ne pas copier/coller votre courriel.<br/>
270
							La double saisie permet de vérifier l'absence d'erreurs.
270
							La double saisie permet de vérifier l'absence d'erreurs.
271
						</p>
271
						</p>
272
					</div>
272
					</div>
273
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
273
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
274
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
274
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
275
						<h4 class="alert-heading">Information : courriel introuvable</h4>
275
						<h4 class="alert-heading">Information : courriel introuvable</h4>
276
						<p>
276
						<p>
277
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
277
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
278
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
278
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
279
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
279
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
280
							il sera nécessaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
280
							il sera nécessaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
281
						</p>
281
						</p>
282
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
282
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
283
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
283
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
284
						<h4 class="alert-heading">Information sur Google Maps</h4>
284
						<h4 class="alert-heading">Information sur Google Maps</h4>
285
						<div class="contenu"></div>
285
						<div class="contenu"></div>
286
					</div>
286
					</div>
287
				</div>
287
				</div>
288
			</div>
288
			</div>
289
 
289
 
290
			<div class="well well-lg">
290
			<div class="well well-lg">
291
				<div class="row">
291
				<div class="row">
292
					<div class="col-md-12">
292
					<div class="col-md-12">
293
						<h2>Lieu du relevé</h2>
293
						<h2>Lieu du relevé</h2>
294
					</div>
294
					</div>
295
				</div>
295
				</div>
296
				<div class="row">
296
				<div class="row">
297
					<div class="col-md-6">
297
					<div class="col-md-6">
298
						<div class="row">
298
						<div class="row">
299
							<div class="col-md-3">
299
							<div class="col-md-3">
300
								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
300
								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
301
							</div>
301
							</div>
302
							<div class="col-md-9 text-right">
302
							<div class="col-md-9 text-right">
303
								<form id="form-carte-recherche" class="form-horizontal" role="form">
303
								<form id="form-carte-recherche" class="form-horizontal" role="form">
304
									<div class="form-group">
304
									<div class="form-group">
305
										<label for="carte-recherche" class="sr-only">Rechercher</label>
305
										<label for="carte-recherche" class="sr-only">Rechercher</label>
306
										<div class="col-md-12">
306
										<div class="col-md-12">
307
											<div class="input-group">
307
											<div class="input-group">
308
												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
308
												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
309
														title="Permet de centrer la carte sur le lieu recherché."
309
														title="Permet de centrer la carte sur le lieu recherché."
310
														placeholder="Centrer la carte sur un lieu..."/>
310
														placeholder="Centrer la carte sur un lieu..."/>
311
												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
311
												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
312
											</div>
312
											</div>
313
										</div>
313
										</div>
314
									</div>
314
									</div>
315
								</form>
315
								</form>
316
							</div>
316
							</div>
317
						</div>
317
						</div>
318
						<div class="row">
318
						<div class="row">
319
							<div class="col-md-12">
319
							<div class="col-md-12">
320
								<div id="map-canvas" class="has-tooltip"
320
								<div id="map-canvas" class="has-tooltip"
321
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
321
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
322
										représentant votre station ou bien le glisser-déposer sur
322
										représentant votre station ou bien le glisser-déposer sur
323
										le lieu souhaité."></div>
323
										le lieu souhaité."></div>
324
							</div>
324
							</div>
325
						</div>
325
						</div>
326
						<div class="row">
326
						<div class="row">
327
							<div id="info-altitude" class="col-md-5">
327
							<div id="info-altitude" class="col-md-5">
328
								<span>Altitude : </span>
328
								<span>Altitude : </span>
329
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
329
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
330
							</div>
330
							</div>
331
 
331
 
332
							<div id="info-commune" class="col-md-7">
332
							<div id="info-commune" class="col-md-7">
333
								<span>Commune : </span>
333
								<span>Commune : </span>
334
								<span id="marqueur-commune">
334
								<span id="marqueur-commune">
335
									<span id="commune-nom" class="commune-info"></span>
335
									<span id="commune-nom" class="commune-info"></span>
336
									(<span id="commune-code-insee" class="commune-info has-tooltip"
336
									(<span id="commune-code-insee" class="commune-info has-tooltip"
337
										title="Code INSEE de la commune"></span>)
337
										title="Code INSEE de la commune"></span>)
338
								</span>
338
								</span>
339
							</div>
339
							</div>
340
						</div>
340
						</div>
341
					</div>
341
					</div>
342
					<div class="col-md-6">
342
					<div class="col-md-6">
343
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
343
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
344
							<div class="form-group has-tooltip"
344
							<div class="form-group has-tooltip"
345
								title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
345
								title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
346
								<label for="lieudit" class="col-sm-2 control-label">
346
								<label for="lieudit" class="col-sm-2 control-label">
347
									Lieu-dit
347
									Lieu-dit
348
								</label>
348
								</label>
349
								<div class="col-sm-10">
349
								<div class="col-sm-10">
350
									<input id="lieudit" name="lieudit" class="form-control" type="text" />
350
									<input id="lieudit" name="lieudit" class="form-control" type="text" />
351
								</div>
351
								</div>
352
							</div>
352
							</div>
353
 
353
 
354
							<div class="form-group has-tooltip"
354
							<div class="form-group has-tooltip"
355
								title="Sélectionnez une ou plusieurs situations correspondant au site.">
355
								title="Sélectionnez une ou plusieurs situations correspondant au site.">
356
								<label for="milieux[]"class="col-sm-2 control-label">Situation(s)</label>
356
								<label for="milieux[]"class="col-sm-2 control-label">Situation(s)</label>
357
								<div id="milieux-controls" class="col-sm-10">
357
								<div id="milieux-controls" class="col-sm-10">
358
									<div class="btn-group dropdown">
358
									<div class="btn-group dropdown">
359
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
359
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
360
											<span class="glyphicon glyphicon-globe"></span>
360
											<span class="glyphicon glyphicon-globe"></span>
361
											Sélectionner une ou plusieurs situations
361
											Sélectionner une ou plusieurs situations
362
											<span class="caret"></span>
362
											<span class="caret"></span>
363
										</button>
363
										</button>
364
										<ul class="dropdown-menu col-sm-12" role="menu" aria-labelledby="dLabel">
364
										<ul class="dropdown-menu col-sm-12" role="menu" aria-labelledby="dLabel">
365
											<li class="checkbox" role="presentation">
365
											<li class="checkbox" role="presentation">
366
												<a role="menuitem">
366
												<a role="menuitem">
367
													<label>
367
													<label>
368
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="séparation de parcelle"/>
368
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="séparation de parcelle"/>
369
														Séparation de parcelle
369
														Séparation de parcelle
370
													</label>
370
													</label>
371
												</a>
371
												</a>
372
											</li>
372
											</li>
373
											<li class="checkbox" role="presentation">
373
											<li class="checkbox" role="presentation">
374
												<a role="menuitem">
374
												<a role="menuitem">
375
													<label>
375
													<label>
376
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="proximité de bâtiment"/>
376
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="proximité de bâtiment"/>
377
														Proximité de bâtiment
377
														Proximité de bâtiment
378
													</label>
378
													</label>
379
												</a>
379
												</a>
380
											</li>
380
											</li>
381
											<li class="checkbox" role="presentation">
381
											<li class="checkbox" role="presentation">
382
												<a role="menuitem">
382
												<a role="menuitem">
383
													<label>
383
													<label>
384
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plein champ"/>
384
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plein champ"/>
385
														Plein champ
385
														Plein champ
386
													</label>
386
													</label>
387
												</a>
387
												</a>
388
											</li>
388
											</li>
389
											<li class="checkbox" role="presentation">
389
											<li class="checkbox" role="presentation">
390
												<a role="menuitem">
390
												<a role="menuitem">
391
													<label>
391
													<label>
392
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="jardin de particulier"/>
392
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="jardin de particulier"/>
393
														Jardin de particulier
393
														Jardin de particulier
394
													</label>
394
													</label>
395
												</a>
395
												</a>
396
											</li>
396
											</li>
397
											<li class="checkbox" role="presentation">
397
											<li class="checkbox" role="presentation">
398
												<a role="menuitem">
398
												<a role="menuitem">
399
													<label>
399
													<label>
400
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de cours d'eau"/>
400
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de cours d'eau"/>
401
														Bord de cours d'eau
401
														Bord de cours d'eau
402
													</label>
402
													</label>
403
												</a>
403
												</a>
404
											</li>
404
											</li>
405
											<li class="checkbox" role="presentation">
405
											<li class="checkbox" role="presentation">
406
												<a role="menuitem">
406
												<a role="menuitem">
407
													<label>
407
													<label>
408
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de chemin"/>
408
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de chemin"/>
409
														Bord de chemin
409
														Bord de chemin
410
													</label>
410
													</label>
411
												</a>
411
												</a>
412
											</li>
412
											</li>
413
											<li class="checkbox" role="presentation">
413
											<li class="checkbox" role="presentation">
414
												<a role="menuitem">
414
												<a role="menuitem">
415
													<label>
415
													<label>
416
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="intégré à une haie"/>
416
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="intégré à une haie"/>
417
														Intégré à une haie
417
														Intégré à une haie
418
													</label>
418
													</label>
419
												</a>
419
												</a>
420
											</li>
420
											</li>
421
											<li class="checkbox" role="presentation">
421
											<li class="checkbox" role="presentation">
422
												<a role="menuitem">
422
												<a role="menuitem">
423
													<label>
423
													<label>
424
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="en forêt"/>
424
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="en forêt"/>
425
														En forêt
425
														En forêt
426
													</label>
426
													</label>
427
												</a>
427
												</a>
428
											</li>
428
											</li>
429
											<li class="checkbox" role="presentation">
429
											<li class="checkbox" role="presentation">
430
												<a role="menuitem">
430
												<a role="menuitem">
431
													<label>
431
													<label>
432
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="en zone humide"/>
432
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="en zone humide"/>
433
														En zone humide
433
														En zone humide
434
													</label>
434
													</label>
435
												</a>
435
												</a>
436
											</li>
436
											</li>
437
										</ul>
437
										</ul>
438
									</div>
438
									</div>
439
								</div>
439
								</div>
440
							</div>
440
							</div>
441
 
441
 
442
							<div class="row">
442
							<div class="row">
443
								<div class="col-md-12">
443
								<div class="col-md-12">
444
									<button class="afficher-coord btn-coord btn btn-default"
444
									<button class="afficher-coord btn-coord btn btn-default"
445
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
445
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
446
										Afficher les coordonnées (WGS 84 et Lambert 93)
446
										Afficher les coordonnées (WGS 84 et Lambert 93)
447
									</button>
447
									</button>
448
									<div id="coordonnees-geo" class="well hidden">
448
									<div id="coordonnees-geo" class="well hidden">
449
										<div class="row">
449
										<div class="row">
450
											<div class="col-md-4">
450
											<div class="col-md-4">
451
												<div id="coord-lat" class="form-group form-group-sm">
451
												<div id="coord-lat" class="form-group form-group-sm">
452
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
452
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
453
													<div class="col-sm-8">
453
													<div class="col-sm-8">
454
														<input id="latitude" class="form-control" name="latitude" type="text"
454
														<input id="latitude" class="form-control" name="latitude" type="text"
455
															title="Latitude (WGS 84)" value=""/>
455
															title="Latitude (WGS 84)" value=""/>
456
													</div>
456
													</div>
457
												</div>
457
												</div>
458
											</div>
458
											</div>
459
											<div class="col-md-5">
459
											<div class="col-md-5">
460
												<div id="coord-lng" class="form-group form-group-sm">
460
												<div id="coord-lng" class="form-group form-group-sm">
461
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
461
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
462
													<div class="col-sm-8">
462
													<div class="col-sm-8">
463
														<input id="longitude" class="form-control" name="longitude" type="text"
463
														<input id="longitude" class="form-control" name="longitude" type="text"
464
															title="Longitude (WGS 84)" value=""/>
464
															title="Longitude (WGS 84)" value=""/>
465
													</div>
465
													</div>
466
												</div>
466
												</div>
467
											</div>
467
											</div>
468
											<div class="col-md-2">
468
											<div class="col-md-2">
469
												<div id="coord-lng" class="form-group form-group-sm">
469
												<div id="coord-lng" class="form-group form-group-sm">
470
													<input type="button" id="geolocaliser"
470
													<input type="button" id="geolocaliser"
471
														class="btn btn-default btn-sm has-tooltip"
471
														class="btn btn-default btn-sm has-tooltip"
472
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
472
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
473
														value="Voir sur la carte"/>
473
														value="Voir sur la carte"/>
474
												</div>
474
												</div>
475
											</div>
475
											</div>
476
										</div>
476
										</div>
477
 
477
 
478
										<div class="row">
478
										<div class="row">
479
											<div class="col-md-6">
479
											<div class="col-md-6">
480
												<div id="coord-l93-x" class="form-group">
480
												<div id="coord-l93-x" class="form-group">
481
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
481
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
482
													<div class="col-sm-5">
482
													<div class="col-sm-5">
483
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
483
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
484
																name="coordonneeLambert93X"
484
																name="coordonneeLambert93X"
485
																data-label="Lambert 93 X"
485
																data-label="Lambert 93 X"
486
																value=""/>
486
																value=""/>
487
													</div>
487
													</div>
488
												</div>
488
												</div>
489
											</div>
489
											</div>
490
											<div class="col-md-6">
490
											<div class="col-md-6">
491
												<div id="coord-l93-y" class="form-group">
491
												<div id="coord-l93-y" class="form-group">
492
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
492
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
493
													<div class="col-sm-5">
493
													<div class="col-sm-5">
494
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
494
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
495
																name="coordonneeLambert93Y"
495
																name="coordonneeLambert93Y"
496
																data-label="Lambert 93 Y"
496
																data-label="Lambert 93 Y"
497
																value=""/>
497
																value=""/>
498
													</div>
498
													</div>
499
												</div>
499
												</div>
500
											</div>
500
											</div>
501
										</div>
501
										</div>
502
									</div>
502
									</div>
503
								</div>
503
								</div>
504
							</div>
504
							</div>
505
						</form>
505
						</form>
506
					</div>
506
					</div>
507
				</div>
507
				</div>
508
 
508
 
509
				<div class="row">
509
				<div class="row">
510
					<div class="col-md-6">
510
					<div class="col-md-6">
511
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
511
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
512
							<h2>Arbre observé</h2>
512
							<h2>Arbre observé</h2>
513
							<input id="referentiel" type="hidden" value="bdtfx" />
513
							<input id="referentiel" type="hidden" value="bdtfx" />
514
 
514
 
515
							<div class="form-group has-tooltip"
515
							<div class="form-group has-tooltip"
516
									title="Vous pouvez cliquer sur l'icône de calendrier pour
516
									title="Vous pouvez cliquer sur l'icône de calendrier pour
517
										sélectionner une date dans un calendrier.">
517
										sélectionner une date dans un calendrier.">
518
								<label for="date" class=" col-sm-4 control-label"
518
								<label for="date" class=" col-sm-4 control-label"
519
									   title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
519
									   title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
520
									<strong class="obligatoire">*</strong>
520
									<strong class="obligatoire">*</strong>
521
									Date du relevé
521
									Date du relevé
522
								</label>
522
								</label>
523
								<div class="col-sm-8">
523
								<div class="col-sm-8">
524
									<div class="input-group">
524
									<div class="input-group">
525
										<span id="date-icone" class="input-group-addon add-on"></span>
525
										<span id="date-icone" class="input-group-addon add-on"></span>
526
										<input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
526
										<input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
527
									</div>
527
									</div>
528
								</div>
528
								</div>
529
							</div>
529
							</div>
530
 
530
 
531
							<div id="taxon-liste-input-groupe" class="form-group has-tooltip"
531
							<div id="taxon-liste-input-groupe" class="form-group has-tooltip"
532
								title="Sélectionnez une espèce dans la liste déroulante par son nom latin
532
								title="Sélectionnez une espèce dans la liste déroulante par son nom latin
533
								ou commun. Si une espèce est absente, sélectionnez «Autre espèce»." >
533
								ou commun. Si une espèce est absente, sélectionnez «Autre espèce»." >
534
								<label for="taxon-liste" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
534
								<label for="taxon-liste" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
535
									<strong class="obligatoire">*</strong>
535
									<strong class="obligatoire">*</strong>
536
									Espèces
536
									Espèces
537
								</label>
537
								</label>
538
								<div class="col-sm-8">
538
								<div class="col-sm-8">
539
									<div class="input-group">
539
									<div class="input-group">
540
										<span class="input-group-addon">
540
										<span class="input-group-addon">
541
											<span class="glyphicon glyphicon-leaf"></span>
541
											<span class="glyphicon glyphicon-leaf"></span>
542
										</span>
542
										</span>
543
 
543
 
544
										<select id="taxon-liste" name="taxon-liste" class="form-control">
544
										<select id="taxon-liste" name="taxon-liste" class="form-control">
545
											<option value="" selected>Sélectionner une espèce</option>
545
											<option value="" selected>Sélectionner une espèce</option>
546
 
546
 
547
											<optgroup id="taxon-liste-noms">
547
											<optgroup id="taxon-liste-noms">
548
												<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
548
												<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
549
													<option
549
													<option
550
														class="<?=$taxon['nom_type'] ?>"
550
														class="<?=$taxon['nom_type'] ?>"
551
														value="<?=$taxon['num_nom'] ?>"
551
														value="<?=$taxon['num_nom'] ?>"
552
														title="<?=$taxon['nom_title'] ?>"
552
														title="<?=$taxon['nom_title'] ?>"
553
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
553
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
554
														>
554
														>
555
														<?=$taxon['nom_a_afficher']?>
555
														<?=$taxon['nom_a_afficher']?>
556
													</option>
556
													</option>
557
												<?php endforeach; ?>
557
												<?php endforeach; ?>
558
											</optgroup>
558
											</optgroup>
559
											<optgroup id="taxon-liste-special">
559
											<optgroup id="taxon-liste-special">
560
												<?php foreach ($taxons['speciaux'] as $taxon) :?>
560
												<?php foreach ($taxons['speciaux'] as $taxon) :?>
561
													<option
561
													<option
562
														class="<?=$taxon['nom_type'] ?>"
562
														class="<?=$taxon['nom_type'] ?>"
563
														value="<?=$taxon['num_nom'] ?>"
563
														value="<?=$taxon['num_nom'] ?>"
564
														title="<?=$taxon['nom_title'] ?>"
564
														title="<?=$taxon['nom_title'] ?>"
565
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
565
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
566
														>
566
														>
567
														<?=$taxon['nom_a_afficher']?>
567
														<?=$taxon['nom_a_afficher']?>
568
													</option>
568
													</option>
569
												<?php endforeach; ?>
569
												<?php endforeach; ?>
570
												<option value="?">Autre espèce</option>
570
												<option value="?">Autre espèce</option>
571
											</optgroup>
571
											</optgroup>
572
										</select>
572
										</select>
573
									</div>
573
									</div>
574
								</div>
574
								</div>
575
							</div>
575
							</div>
576
 
576
 
577
							<div id="taxon-input-groupe" class="form-group has-tooltip hidden"
577
							<div id="taxon-input-groupe" class="form-group has-tooltip hidden"
578
								title="Vous pouvez saisir ici un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
578
								title="Vous pouvez saisir ici un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
579
								<label for="taxon" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
579
								<label for="taxon" class="col-sm-4 control-label" title="Choisissez l'espèce rencontrée.">
580
									<strong class="obligatoire">*</strong>
580
									<strong class="obligatoire">*</strong>
581
									Autre espèce
581
									Autre espèce
582
								</label>
582
								</label>
583
								<div class="col-sm-8">
583
								<div class="col-sm-8">
584
									<input id="taxon" name="taxon" type="text" class="form-control"
584
									<input id="taxon" name="taxon" type="text" class="form-control"
585
										placeholder="Autre espèce (ou indication sur la plante)"
585
										placeholder="Autre espèce (ou indication sur la plante)"
586
										value="<?= $nom_sci_espece_defaut; ?>" />
586
										value="<?= $nom_sci_espece_defaut; ?>" />
587
								</div>
587
								</div>
588
							</div>
588
							</div>
589
 
589
 
590
							<div class="form-group has-tooltip"
590
							<div class="form-group has-tooltip"
591
									title="Indiquez la certitude de votre détermination.">
591
									title="Indiquez la certitude de votre détermination.">
592
								<label for="certitude" class="col-sm-4 control-label">
592
								<label for="certitude" class="col-sm-4 control-label">
593
									<strong class="obligatoire">*</strong>
593
									<strong class="obligatoire">*</strong>
594
									Identification de l'arbre
594
									Identification de l'arbre
595
								</label>
595
								</label>
596
								<div class="col-sm-8">
596
								<div class="col-sm-8">
597
									<select id="certitude" class="form-control" name="certitude">
597
									<select id="certitude" class="form-control" name="certitude">
598
										<option selected value="">Sélectionner une certitude</option>
598
										<option selected value="">Sélectionner une certitude</option>
599
										<option value="Certaine">Certaine</option>
599
										<option value="Certaine">Certaine</option>
600
										<option value="Douteuse">Douteuse</option>
600
										<option value="Douteuse">Douteuse</option>
601
										<option value="A déterminer">À déterminer</option>
601
										<option value="A déterminer">À déterminer</option>
602
									</select>
602
									</select>
603
								</div>
603
								</div>
604
							</div>
604
							</div>
605
 
605
 
606
							<div class="form-group has-tooltip"
606
							<div class="form-group has-tooltip"
607
									title="Indiquez le type de formation de l'arbre ou des arbres têtards.">
607
									title="Indiquez le type de formation de l'arbre ou des arbres têtards.">
608
								<label for="formation" class="col-sm-4 control-label">
608
								<label for="formation" class="col-sm-4 control-label">
609
									<strong class="obligatoire">*</strong>
609
									<strong class="obligatoire">*</strong>
610
									Formation
610
									Formation
611
								</label>
611
								</label>
612
								<div class="col-sm-8 select-container">
612
								<div class="col-sm-8 select-container">
613
									<select id="formation" class="form-control obs-chp-etendu"
613
									<select id="formation" class="form-control obs-chp-etendu"
614
											name="arbreTetardFormation"
614
											name="arbreTetardFormation"
615
											data-label="Type de formation">
615
											data-label="Type de formation">
616
										<option selected value="">Sélectionner une formation</option>
616
										<option selected value="">Sélectionner une formation</option>
617
										<option value="alignement">Arbres d'alignement</option>
617
										<option value="alignement">Arbres d'alignement</option>
618
										<option value="isolé">Arbre isolé</option>
618
										<option value="isolé">Arbre isolé</option>
619
									</select>
619
									</select>
620
								</div>
620
								</div>
621
							</div>
621
							</div>
622
 
622
 
623
							<div id="aligne-nbre-groupe" class="form-group has-tooltip hidden"
623
							<div id="aligne-nbre-groupe" class="form-group has-tooltip hidden"
624
								title="Indiquez le nombre d'arbres têtards alignés." >
624
								title="Indiquez le nombre d'arbres têtards alignés." >
625
								<label for="aligne-nbre" class="col-sm-4 control-label">
625
								<label for="aligne-nbre" class="col-sm-4 control-label">
626
									<strong class="obligatoire">*</strong>
626
									<strong class="obligatoire">*</strong>
627
									Nombre d'arbres
627
									Nombre d'arbres
628
								</label>
628
								</label>
629
								<div class="col-sm-4">
629
								<div class="col-sm-4">
630
									<input id="aligne-nbre" type="number" class="form-control obs-chp-etendu"
630
									<input id="aligne-nbre" type="number" class="form-control obs-chp-etendu"
631
										min="2"
631
										min="2"
632
										name="arbreTetardAligneNbre"
632
										name="arbreTetardAligneNbre"
633
										data-label="Nombre d'arbres d'alignement"
633
										data-label="Nombre d'arbres d'alignement"
634
										value="" />
634
										value="" />
635
								</div>
635
								</div>
636
							</div>
636
							</div>
637
 
637
 
638
							<div class="form-group has-tooltip"
638
							<div class="form-group has-tooltip"
639
									title="Indiquez si des cavités sont présentes sur l'arbre.">
639
									title="Indiquez si des cavités sont présentes sur l'arbre.">
640
								<label for="cavites" class="col-sm-4 control-label">
640
								<label for="cavites" class="col-sm-4 control-label">
641
									Cavités
641
									Cavités
642
								</label>
642
								</label>
643
								<div class="col-sm-8">
643
								<div class="col-sm-8">
644
									<select id="cavites" class="form-control obs-chp-etendu"
644
									<select id="cavites" class="form-control obs-chp-etendu"
645
											name="arbreTetardPresenceCavite"
645
											name="arbreTetardPresenceCavite"
646
											data-label="Présence de cavités">
646
											data-label="Présence de cavités">
647
										<option selected value="">Sélectionner la présence de cavités</option>
647
										<option selected value="">Sélectionner la présence de cavités</option>
648
										<option value="aucune">Aucune</option>
648
										<option value="aucune">Aucune</option>
649
										<option value="petite">Oui, petite(s)</option>
649
										<option value="petite">Oui, petite(s)</option>
650
										<option value="grande">Oui, grande(s)</option>
650
										<option value="grande">Oui, grande(s)</option>
651
									</select>
651
									</select>
652
								</div>
652
								</div>
653
							</div>
653
							</div>
654
 
654
 
655
							<div class="form-group has-tooltip"
655
							<div class="form-group has-tooltip"
656
									title="Indiquez la classe de circonférence de l'arbre à 1m du sol.">
656
									title="Indiquez la classe de circonférence de l'arbre à 1m du sol.">
657
								<label for="circonference" class="col-sm-4 control-label">
657
								<label for="circonference" class="col-sm-4 control-label">
658
									Circonférence
658
									Circonférence
659
								</label>
659
								</label>
660
								<div class="col-sm-8">
660
								<div class="col-sm-8">
661
									<select id="circonference" class="form-control obs-chp-etendu"
661
									<select id="circonference" class="form-control obs-chp-etendu"
662
											name="arbreTetardClasseCirconferenceA1m"
662
											name="arbreTetardClasseCirconferenceA1m"
663
											data-label="Classe de circonférence à 1 m du sol (en m)">
663
											data-label="Classe de circonférence à 1 m du sol (en m)">
664
										<option selected value="">Sélectionner la circonférence (à 1m du sol)</option>
664
										<option selected value="">Sélectionner la circonférence (à 1m du sol)</option>
665
										<option value="0-0,5">0 à 0,5m</option>
665
										<option value="0-0,5">0 à 0,5m</option>
666
										<option value="0,5-2">0,5 à 2m</option>
666
										<option value="0,5-2">0,5 à 2m</option>
667
										<option value="2-3">2 à 3m</option>
667
										<option value="2-3">2 à 3m</option>
668
										<option value="+3">&gt; à 3m</option>
668
										<option value="+3">&gt; à 3m</option>
669
									</select>
669
									</select>
670
								</div>
670
								</div>
671
							</div>
671
							</div>
672
 
672
 
673
							<div class="form-group has-tooltip"
673
							<div class="form-group has-tooltip"
674
									title="Indiquez la hauteur de la tête.">
674
									title="Indiquez la hauteur de la tête.">
675
								<label for="hauteur-tete" class="col-sm-4 control-label">
675
								<label for="hauteur-tete" class="col-sm-4 control-label">
676
									Hauteur de la tête
676
									Hauteur de la tête
677
								</label>
677
								</label>
678
								<div class="col-sm-8">
678
								<div class="col-sm-8">
679
									<select id="hauteur-tete" class="form-control obs-chp-etendu"
679
									<select id="hauteur-tete" class="form-control obs-chp-etendu"
680
											name="arbreTetardHauteurTete"
680
											name="arbreTetardHauteurTete"
681
											data-label="Hauteur de la tête (en m)">
681
											data-label="Hauteur de la tête (en m)">
682
										<option selected value="">Sélectionner la hauteur</option>
682
										<option selected value="">Sélectionner la hauteur</option>
683
										<option value="0-1,5">0 à 1,5m</option>
683
										<option value="0-1,5">0 à 1,5m</option>
684
										<option value="1,5-3">1,5 à 3m</option>
684
										<option value="1,5-3">1,5 à 3m</option>
685
										<option value="+3">&gt; à 3m</option>
685
										<option value="+3">&gt; à 3m</option>
686
									</select>
686
									</select>
687
								</div>
687
								</div>
688
							</div>
688
							</div>
689
 
689
 
690
							<div class="form-group">
690
							<div class="form-group">
691
								<label for="presence-sp" class="col-sm-12 control-label">Espèces présentes sur l'arbre (végétale ou animale)</label>
691
								<label for="presence-sp" class="col-sm-12 control-label">Espèces présentes sur l'arbre (végétale ou animale)</label>
692
								<div class="col-sm-12">
692
								<div class="col-sm-12">
693
									<textarea id="presence-sp" class="form-control obs-chp-etendu" rows="7"
693
									<textarea id="presence-sp" class="form-control obs-chp-etendu" rows="7"
694
										name="arbreTetardPresenceSp"
694
										name="arbreTetardPresenceSp"
695
										data-label="Présence d'espèces sur l'arbre"
695
										data-label="Présence d'espèces sur l'arbre"
696
										placeholder="Vous pouvez éventuellement indiquer des informations du type : Champignons ; Lierre ; Mousses ; Lichens ; Autre plante... Larve d'insecte saproxylique ; Galerie dans le bois ; Pelote de réjection ; Nid ; Crotte ; Trou"></textarea>
696
										placeholder="Vous pouvez éventuellement indiquer des informations du type : Champignons ; Lierre ; Mousses ; Lichens ; Autre plante... Larve d'insecte saproxylique ; Galerie dans le bois ; Pelote de réjection ; Nid ; Crotte ; Trou"></textarea>
697
								</div>
697
								</div>
698
							</div>
698
							</div>
699
						</form>
699
						</form>
700
					</div>
700
					</div>
701
 
701
 
702
					<div class="col-md-6">
702
					<div class="col-md-6">
703
						<form id="form-gestion" class="form-horizontal" role="form" autocomplete="on">
703
						<form id="form-gestion" class="form-horizontal" role="form" autocomplete="on">
704
							<h2>Gestion de l'arbre</h2>
704
							<h2>Gestion de l'arbre</h2>
705
 
705
 
706
							<div class="form-group has-tooltip"
706
							<div class="form-group has-tooltip"
707
									title="Indiquez le type de taille de l'arbre.">
707
									title="Indiquez le type de taille de l'arbre.">
708
								<label for="taille-type" class="col-sm-4 control-label">
708
								<label for="taille-type" class="col-sm-4 control-label">
709
									Type de taille
709
									Type de taille
710
								</label>
710
								</label>
711
								<div class="col-sm-8">
711
								<div class="col-sm-8">
712
									<div class="input-group">
712
									<div class="input-group">
713
										<select id="taille-type" class="form-control obs-chp-etendu"
713
										<select id="taille-type" class="form-control obs-chp-etendu"
714
												name="arbreTetardTailleType"
714
												name="arbreTetardTailleType"
715
												data-label="Type de taille">
715
												data-label="Type de taille">
716
											<option selected value="">Sélectionner le type de taille</option>
716
											<option selected value="">Sélectionner le type de taille</option>
717
											<option value="trogne">Trogne</option>
717
											<option value="trogne">Trogne</option>
718
											<option value="tête de chat">Tête de chat</option>
718
											<option value="tête de chat">Tête de chat</option>
719
											<option value="émonde">Émonde</option>
719
											<option value="émonde">Émonde</option>
720
											<option value="autre">Autre, précisez le type de taille dans les notes</option>
720
											<option value="autre">Autre, précisez le type de taille dans les notes</option>
721
										</select>
721
										</select>
722
										<div class="input-group-btn">
722
										<div class="input-group-btn">
723
											<button class="btn btn-default" type="button" data-toggle="modal" data-target="#taille-description">
723
											<button class="btn btn-default" type="button" data-toggle="modal" data-target="#taille-description">
724
												<span class="glyphicon glyphicon-info-sign"></span> Aide
724
												<span class="glyphicon glyphicon-info-sign"></span> Aide
725
											</button>
725
											</button>
726
										</div>
726
										</div>
727
									</div>
727
									</div>
728
								</div>
728
								</div>
729
							</div>
729
							</div>
730
 
730
 
731
							<div class="form-group has-tooltip"
731
							<div class="form-group has-tooltip"
732
									title="Indiquez le type d’entretien de l'arbre, en précisant la périodicité des coupes.">
732
									title="Indiquez le type d’entretien de l'arbre, en précisant la périodicité des coupes.">
733
								<label for="entretien" class="col-sm-4 control-label">
733
								<label for="entretien" class="col-sm-4 control-label">
734
									Type d'entretien
734
									Type d'entretien
735
								</label>
735
								</label>
736
								<div class="col-sm-8">
736
								<div class="col-sm-8">
737
									<select id="entretien" class="form-control obs-chp-etendu"
737
									<select id="entretien" class="form-control obs-chp-etendu"
738
											name="arbreTetardEntretienCoupe"
738
											name="arbreTetardEntretienCoupe"
739
											data-label="Coupe d'entretien">
739
											data-label="Coupe d'entretien">
740
										<option selected value="">Sélectionner la périodicité des coupes</option>
740
										<option selected value="">Sélectionner la périodicité des coupes</option>
741
										<option value="récente">Coupe récente (< 5 ans ; diamètre des branches < 10cm)</option>
741
										<option value="récente">Coupe récente (< 5 ans ; diamètre des branches < 10cm)</option>
742
										<option value="ancienne">Ancienne (5 à 10 ans ; diamètre des branches entre 10 et 15 cm )</option>
742
										<option value="ancienne">Ancienne (5 à 10 ans ; diamètre des branches entre 10 et 15 cm )</option>
743
										<option value="non entretenu">Non entretenu ( diamètre des branches > 15 cm)</option>
743
										<option value="non entretenu">Non entretenu ( diamètre des branches > 15 cm)</option>
744
									</select>
744
									</select>
745
								</div>
745
								</div>
746
							</div>
746
							</div>
747
 
747
 
748
							<div class="form-group has-tooltip"
748
							<div class="form-group has-tooltip"
749
									title="Indiquez l'état sanitaire de l'arbre têtard.">
749
									title="Indiquez l'état sanitaire de l'arbre têtard.">
750
								<label for="etat-sanitaire" class="col-sm-4 control-label">
750
								<label for="etat-sanitaire" class="col-sm-4 control-label">
751
									État sanitaire
751
									État sanitaire
752
								</label>
752
								</label>
753
								<div class="col-sm-8">
753
								<div class="col-sm-8">
754
									<select id="etat-sanitaire" class="form-control obs-chp-etendu"
754
									<select id="etat-sanitaire" class="form-control obs-chp-etendu"
755
											name="arbreTetardEtatSanitaire"
755
											name="arbreTetardEtatSanitaire"
756
											data-label="État sanitaire">
756
											data-label="État sanitaire">
757
										<option selected value="">Sélectionner l'état sanitaire</option>
757
										<option selected value="">Sélectionner l'état sanitaire</option>
758
										<option value="mort">Mort</option>
758
										<option value="mort">Mort</option>
759
										<option value="dépérissant">Dépérissant</option>
759
										<option value="dépérissant">Dépérissant</option>
760
										<option value="bon">Bon état général</option>
760
										<option value="bon">Bon état général</option>
761
									</select>
761
									</select>
762
								</div>
762
								</div>
763
							</div>
763
							</div>
764
						</form>
764
						</form>
765
 
765
 
766
						<div class="row">
766
						<div class="row">
767
							<div class="col-md-12">
767
							<div class="col-md-12">
768
								<h2>Notes</h2>
768
								<h2>Notes</h2>
769
								<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
769
								<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
770
									placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation"></textarea>
770
									placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation"></textarea>
771
							</div>
771
							</div>
772
						</div>
772
						</div>
773
 
773
 
774
						<div class="row">
774
						<div class="row">
775
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
775
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
776
								method="post" enctype="multipart/form-data">
776
								method="post" enctype="multipart/form-data">
777
								<div class="col-md-12">
777
								<div class="col-md-12">
778
									<h2>Image(s) de l'arbre</h2>
778
									<h2>Image(s) de l'arbre</h2>
779
									<strong>Ajouter une image</strong>
779
									<strong>Ajouter une image</strong>
780
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
780
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.</p>
781
									<div id ="photos-conteneur" class="form-group">
781
									<div id ="photos-conteneur" class="form-group">
782
										<div class="col-sm-12">
782
										<div class="col-sm-12">
783
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
783
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
784
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
784
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
785
										</div>
785
										</div>
786
										<div id="miniatures"></div>
786
										<div id="miniatures"></div>
787
										<p class="miniature-msg col-md-12">&nbsp;</p>
787
										<p class="miniature-msg col-md-12">&nbsp;</p>
788
									</div>
788
									</div>
789
								</div>
789
								</div>
790
							</form>
790
							</form>
791
						</div>
791
						</div>
792
					</div>
792
					</div>
793
				</div>
793
				</div>
794
 
794
 
795
				<div class="row">
795
				<div class="row">
796
					<div class="col-md-12 centre has-tooltip"
796
					<div class="col-md-12 centre has-tooltip"
797
						title="Une fois les champs remplis, cliquez sur ce bouton pour
797
						title="Une fois les champs remplis, cliquez sur ce bouton pour
798
							ajouter votre observation à la liste à transmettre.">
798
							ajouter votre observation à la liste à transmettre.">
799
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
799
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
800
							Créer
800
							Créer
801
						</button>
801
						</button>
802
					</div>
802
					</div>
803
				</div>
803
				</div>
804
			</div>
804
			</div>
805
 
805
 
806
			<!-- Messages d'erreur du formulaire-->
806
			<!-- Messages d'erreur du formulaire-->
807
			<div class="row">
807
			<div class="row">
808
				<div class="zone-alerte col-md-6 col-md-offset-3">
808
				<div class="zone-alerte col-md-6 col-md-offset-3">
809
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
809
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
810
						<a class="close">×</a>
810
						<a class="close">×</a>
811
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
811
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
812
						<p>
812
						<p>
813
							Vous venez d'ajouter votre 10ème observation.<br/>
813
							Vous venez d'ajouter votre 10ème observation.<br/>
814
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
814
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
815
						</p>
815
						</p>
816
					</div>
816
					</div>
817
				</div>
817
				</div>
818
				<div class="zone-alerte col-md-6 col-md-offset-3">
818
				<div class="zone-alerte col-md-6 col-md-offset-3">
819
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
819
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
820
						<a class="close">×</a>
820
						<a class="close">×</a>
821
						<h4 class="alert-heading">Information : champs en erreur</h4>
821
						<h4 class="alert-heading">Information : champs en erreur</h4>
822
						<p>
822
						<p>
823
							Certains champs du formulaire sont mal remplis.<br/>
823
							Certains champs du formulaire sont mal remplis.<br/>
824
							Veuillez vérifier vos données.
824
							Veuillez vérifier vos données.
825
						</p>
825
						</p>
826
					</div>
826
					</div>
827
				</div>
827
				</div>
828
			</div>
828
			</div>
829
 
829
 
830
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
830
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
831
			<div id="zone-liste-obs" class="row">
831
			<div id="zone-liste-obs" class="row">
832
				<div class="col-md-12">
832
				<div class="col-md-12">
833
					<div class="well well-lg">
833
					<div class="well well-lg">
834
						<div class="row">
834
						<div class="row">
835
							<div class="col-md-8">
835
							<div class="col-md-8">
836
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
836
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
837
							</div>
837
							</div>
838
							<div class="col-md-4 text-right">
838
							<div class="col-md-4 text-right">
839
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
839
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
840
									type="button" disabled="disabled"
840
									type="button" disabled="disabled"
841
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
841
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
842
									Transmettre
842
									Transmettre
843
								</button>
843
								</button>
844
							</div>
844
							</div>
845
						</div>
845
						</div>
846
						<div id="liste-obs" ></div>
846
						<div id="liste-obs" ></div>
847
						<div class="row">
847
						<div class="row">
848
							<div class="zone-alerte col-md-6 col-md-offset-3">
848
							<div class="zone-alerte col-md-6 col-md-offset-3">
849
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
849
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
850
									<a class="close">×</a>
850
									<a class="close">×</a>
851
									<h4 class="alert-heading">Attention : aucune observation</h4>
851
									<h4 class="alert-heading">Attention : aucune observation</h4>
852
									<p>Veuillez saisir des observations pour les transmettre.</p>
852
									<p>Veuillez saisir des observations pour les transmettre.</p>
853
								</div>
853
								</div>
854
 
854
 
855
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
855
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
856
									<a class="close">×</a>
856
									<a class="close">×</a>
857
									<h4 class="alert-heading">Information : transmission des observations</h4>
857
									<h4 class="alert-heading">Information : transmission des observations</h4>
858
									<div class="alert-txt"></div>
858
									<div class="alert-txt"></div>
859
								</div>
859
								</div>
860
 
860
 
861
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
861
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
862
									<a class="close">×</a>
862
									<a class="close">×</a>
863
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
863
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
864
									<div class="alert-txt"></div>
864
									<div class="alert-txt"></div>
865
								</div>
865
								</div>
866
							</div>
866
							</div>
867
						</div>
867
						</div>
868
 
868
 
869
					</div>
869
					</div>
870
				</div>
870
				</div>
871
			</div>
871
			</div>
872
 
872
 
873
			<footer class="row">
873
			<footer class="row">
874
				<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
874
				<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
875
			</footer>
875
			</footer>
876
 
876
 
877
			<!-- Templates HTML -->
877
			<!-- Templates HTML -->
878
			<div id="tpl-transmission-ok" style="display:none;">
878
			<div id="tpl-transmission-ok" style="display:none;">
879
				<p class="msg">
879
				<p class="msg">
880
					Vos observations ont bien été transmises.<br />
880
					Vos observations ont bien été transmises.<br />
881
					Elles sont désormais consultables à travers les différents outils de visualisation
881
					Elles sont désormais consultables à travers les différents outils de visualisation
882
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
882
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
883
					<a href="http://www.tela-botanica.org/appli:pictoflora">Pictoflora</a>,
883
					<a href="http://www.tela-botanica.org/appli:pictoflora">Pictoflora</a>,
884
					<a href="http://www.tela-botanica.org/appli:del">Identiplante</a>,
884
					<a href="http://www.tela-botanica.org/appli:del">Identiplante</a>,
885
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
885
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
886
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
886
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
887
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en Ligne</a>.<br />
887
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en Ligne</a>.<br />
888
					N'oubliez pas qu'il est nécessaire de
888
					N'oubliez pas qu'il est nécessaire de
889
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
889
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
890
					au préalable, si ce n'est pas déjà fait.
890
					au préalable, si ce n'est pas déjà fait.
891
				</p>
891
				</p>
892
			</div>
892
			</div>
893
			<div id="tpl-transmission-ko" style="display:none;">
893
			<div id="tpl-transmission-ko" style="display:none;">
894
				<p class="msg">
894
				<p class="msg">
895
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
895
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
896
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
896
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
897
					et transmettre les suivantes.<br />
897
					et transmettre les suivantes.<br />
898
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
898
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
899
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
899
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
900
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
900
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
901
								  target="_blank"
901
								  target="_blank"
902
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
902
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
903
								  le formulaire de signalement d'erreurs</a>.
903
								  le formulaire de signalement d'erreurs</a>.
904
				</p>
904
				</p>
905
			</div>
905
			</div>
906
 
906
 
907
			<!-- Fenêtres modales -->
907
			<!-- Fenêtres modales -->
908
			<div id="chargement" class="modal-fenetre" style="display:none;">
908
			<div id="chargement" class="modal-fenetre" style="display:none;">
909
				<div id="chargement-centrage" class="modal-contenu">
909
				<div id="chargement-centrage" class="modal-contenu">
910
					<div class="progress">
910
					<div class="progress">
911
						<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="">
911
						<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="">
912
							<span class="sr-only">0/10 observations transmises</span>
912
							<span class="sr-only">0/10 observations transmises</span>
913
						</div>
913
						</div>
914
					</div>
914
					</div>
915
 
915
 
916
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
916
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
917
						Transfert des observations en cours...<br />
917
						Transfert des observations en cours...<br />
918
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
918
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
919
						d'observations à transférer.
919
						d'observations à transférer.
920
					</p>
920
					</p>
921
				</div>
921
				</div>
922
			</div>
922
			</div>
923
 
923
 
924
			<div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
924
			<div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
925
				 aria-labelledby="projet-description-titre" aria-hidden="true">
925
				 aria-labelledby="projet-description-titre" aria-hidden="true">
926
				<div class="modal-dialog">
926
				<div class="modal-dialog">
927
					<div class="modal-content">
927
					<div class="modal-content">
928
						<div class="modal-header">
928
						<div class="modal-header">
929
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
929
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
930
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
930
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
931
							</button>
931
							</button>
932
							<h1 id="projet-description-titre" class="modal-title">Les arbres têtards</h1>
932
							<h1 id="projet-description-titre" class="modal-title">Les arbres têtards</h1>
933
						</div>
933
						</div>
934
						<div class="modal-body">
934
						<div class="modal-body">
935
							<div class="dsc-imgs">
935
							<div class="dsc-imgs">
936
								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/tetard_simple.png" alt="Illustration d'un arbre tétârd"/>
936
								<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/tetard_simple.png" alt="Illustration d'un arbre tétârd"/>
937
							</div>
937
							</div>
938
							<div class="dsc-infos text-justify">
938
							<div class="dsc-infos text-justify">
939
								<h2>Qu'est-ce qu'un arbre têtard&nbsp;?</h2>
939
								<h2>Qu'est-ce qu'un arbre têtard&nbsp;?</h2>
940
								<p>
940
								<p>
941
									Les arbres taillés en têtard présentent une morphologie particulière du fait de l’entretien
941
									Les arbres taillés en têtard présentent une morphologie particulière du fait de l’entretien
942
									qu'ils ont connu au fil des ans. Leur tronc, plus ou moins tortueux, supporte une « tête »
942
									qu'ils ont connu au fil des ans. Leur tronc, plus ou moins tortueux, supporte une « tête »
943
									présentant de nombreux renflements. Cette partie de l’arbre s’est formée à la suite d’une
943
									présentant de nombreux renflements. Cette partie de l’arbre s’est formée à la suite d’une
944
									taille répétée, créant ainsi des bourrelets cicatriciels et donnant un aspect très
944
									taille répétée, créant ainsi des bourrelets cicatriciels et donnant un aspect très
945
									caractéristique à ces arbres.<br />
945
									caractéristique à ces arbres.<br />
946
									De nombreuses essences d’arbres peuvent être conduites en têtard. En Isère, les plus
946
									De nombreuses essences d’arbres peuvent être conduites en têtard. En Isère, les plus
947
									fréquentes sont les saules, les frênes, les peupliers et aussi les mûriers.
947
									fréquentes sont les saules, les frênes, les peupliers et aussi les mûriers.
948
								</p>
948
								</p>
949
 
949
 
950
								<h2>Patrimoine naturel</h2>
950
								<h2>Patrimoine naturel</h2>
951
								<p>
951
								<p>
952
									Au fur et à mesure de la croissance et de la taille des arbres têtards, des <strong>cavités</strong> plus
952
									Au fur et à mesure de la croissance et de la taille des arbres têtards, des <strong>cavités</strong> plus
953
									ou moins importantes s’ouvrent au cœur du tronc. Ces abris naturels sont occupés par de
953
									ou moins importantes s’ouvrent au cœur du tronc. Ces abris naturels sont occupés par de
954
									<strong>nombreuses espèces d’oiseaux et d’insectes</strong> s'y installant pour les conditions particulières
954
									<strong>nombreuses espèces d’oiseaux et d’insectes</strong> s'y installant pour les conditions particulières
955
									que ces cavités procurent.<br/>
955
									que ces cavités procurent.<br/>
956
									Outre leurs qualités de gîte et de source de nourriture, les trognes jouent
956
									Outre leurs qualités de gîte et de source de nourriture, les trognes jouent
957
									<strong>d'autres rôles écologiques</strong> en retenant les berges des
957
									<strong>d'autres rôles écologiques</strong> en retenant les berges des
958
									cours d'eau, limitant les crues, protégeant les cultures des vents, etc.
958
									cours d'eau, limitant les crues, protégeant les cultures des vents, etc.
959
								</p>
959
								</p>
960
 
960
 
961
								<h2>Patrimoine culturel</h2>
961
								<h2>Patrimoine culturel</h2>
962
								<p>
962
								<p>
963
									Ces arbres sont les témoins de pratiques agricoles ancestrales. Ils produisent la matière
963
									Ces arbres sont les témoins de pratiques agricoles ancestrales. Ils produisent la matière
964
									première pour la <strong>vannerie</strong>, des <strong>liens flexibles</strong>
964
									première pour la <strong>vannerie</strong>, des <strong>liens flexibles</strong>
965
									pour l'agriculture (lier les fagots, attacher la vigne et les fruitiers,...),
965
									pour l'agriculture (lier les fagots, attacher la vigne et les fruitiers,...),
966
									du <strong>fourrage</strong>, du <strong>bois de chauffage</strong>. De plus
966
									du <strong>fourrage</strong>, du <strong>bois de chauffage</strong>. De plus
967
									ils étaient largement utilisés pour marquer le bornage des parcelles agricoles ainsi
967
									ils étaient largement utilisés pour marquer le bornage des parcelles agricoles ainsi
968
									que pour la <strong>sériciculture</strong>, afin de nourrir les vers à soie.<br />
968
									que pour la <strong>sériciculture</strong>, afin de nourrir les vers à soie.<br />
969
									Enfin ce sont aujourd'hui des <strong>éléments remarquables de nos paysages</strong>
969
									Enfin ce sont aujourd'hui des <strong>éléments remarquables de nos paysages</strong>
970
									qui participent à l'identité culturelle de nos territoires.
970
									qui participent à l'identité culturelle de nos territoires.
971
								</p>
971
								</p>
972
								<p class="bg-success text-center">
972
								<p class="bg-success text-center">
973
									<strong>
973
									<strong>
974
										Afin d’œuvrer à leur conservation, nous avons besoin de vous :
974
										Afin d’œuvrer à leur conservation, nous avons besoin de vous :
975
										transmettez-nous vos observations.
975
										transmettez-nous vos observations.
976
									</strong>
976
									</strong>
977
								</p>
977
								</p>
978
							</div>
978
							</div>
979
						</div>
979
						</div>
980
						<div class="modal-footer dsc-clean">
980
						<div class="modal-footer dsc-clean">
981
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
981
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
982
						</div>
982
						</div>
983
					</div>
983
					</div>
984
				</div>
984
				</div>
985
			</div>
985
			</div>
986
 
986
 
987
			<div id="taille-description" class="modal fade" tabindex="-1" role="dialog"
987
			<div id="taille-description" class="modal fade" tabindex="-1" role="dialog"
988
				 aria-labelledby="taille-description-titre" aria-hidden="true">
988
				 aria-labelledby="taille-description-titre" aria-hidden="true">
989
				<div class="modal-dialog">
989
				<div class="modal-dialog">
990
					<div class="modal-content">
990
					<div class="modal-content">
991
						<div class="modal-header">
991
						<div class="modal-header">
992
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
992
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
993
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
993
								<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
994
							</button>
994
							</button>
995
							<h1 id="taille-description-titre" class="modal-title">Les types de taille les plus courants</h1>
995
							<h1 id="taille-description-titre" class="modal-title">Les types de taille les plus courants</h1>
996
						</div>
996
						</div>
997
						<div class="modal-body text-center">
997
						<div class="modal-body text-center">
998
							<div class="taille-img thumbnail">
998
							<div class="taille-img thumbnail">
999
								<div class="taille-img-alignement">
999
								<div class="taille-img-alignement">
1000
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tetard.png"
1000
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tetard.png"
1001
										 alt="Illustration d'un arbre tétârd taillé en têtard ou trogne"/>
1001
										 alt="Illustration d'un arbre tétârd taillé en têtard ou trogne"/>
1002
									<div class="caption"><h3>En têtard ou trogne</h3></div>
1002
									<div class="caption"><h3>En têtard ou trogne</h3></div>
1003
								</div>
1003
								</div>
1004
							</div>
1004
							</div>
1005
							<div class="taille-img thumbnail">
1005
							<div class="taille-img thumbnail">
1006
								<div class="taille-img-alignement">
1006
								<div class="taille-img-alignement">
1007
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tete_de_chat.png"
1007
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_tete_de_chat.png"
1008
										 alt="Illustration d'un arbre tétârd taillé en têtard de chat"/>
1008
										 alt="Illustration d'un arbre tétârd taillé en têtard de chat"/>
1009
									<div class="caption"><h3>En tête de chat</h3></div>
1009
									<div class="caption"><h3>En tête de chat</h3></div>
1010
								</div>
1010
								</div>
1011
							</div>
1011
							</div>
1012
							<div class="taille-img thumbnail">
1012
							<div class="taille-img thumbnail">
1013
								<div class="taille-img-alignement">
1013
								<div class="taille-img-alignement">
1014
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_ragosse.png"
1014
									<img src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/dsc/taille_ragosse.png"
1015
										 alt="Illustration d'un arbre tétârd taillé en ragosse"/>
1015
										 alt="Illustration d'un arbre tétârd taillé en ragosse"/>
1016
									<div class="caption"><h3>En ragosse</h3></div>
1016
									<div class="caption"><h3>En ragosse</h3></div>
1017
								</div>
1017
								</div>
1018
							</div>
1018
							</div>
1019
						</div>
1019
						</div>
1020
						<div class="modal-footer dsc-clean">
1020
						<div class="modal-footer dsc-clean">
1021
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
1021
							<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Fermer</button>
1022
						</div>
1022
						</div>
1023
					</div>
1023
					</div>
1024
				</div>
1024
				</div>
1025
			</div>
1025
			</div>
1026
		</div>
1026
		</div>
1027
	</body>
1027
	</body>
1028
</html>
1028
</html>