Subversion Repositories eFlore/Applications.cel

Rev

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

Rev 2711 Rev 2848
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="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
23
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
24
		<!-- Proj4js -->
24
		<!-- Proj4js -->
25
		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
25
		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
26
 
26
 
27
		<!-- Jquery -->
27
		<!-- Jquery -->
28
		<script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
28
		<script src="http://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="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
30
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
31
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
31
		<script src="http://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="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
34
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
35
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
35
		<script src="http://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="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
37
		<script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
38
		<!-- Bootstrap -->
38
		<!-- Bootstrap -->
39
		<script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
39
		<script src="http://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 = "http://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 = "http://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 = "http://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="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
121
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
122
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
122
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
123
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
123
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
124
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
124
		<link rel="stylesheet" href="http://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
		<script>
-
 
128
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-
 
129
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-
 
130
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-
 
131
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
 
132
		
-
 
133
		  ga('create', 'UA-20092557-1', 'auto');
127
		<!--  Google Analytics -->
134
		  ga('require', 'displayfeatures');
128
		<?php if($prod): ?>
135
		  ga('send', 'pageview');
129
			<?php include "analytics.html"; ?>
136
		
-
 
137
		</script>
130
		<?php endif; ?>
138
	</head>
131
	</head>
139
 
132
 
140
	<body data-spy="scroll">
133
	<body data-spy="scroll">
141
		<div class="container">
134
		<div class="container">
142
			<div class="page-header">
135
			<div class="page-header">
143
				<h1>
136
				<h1>
144
					<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" />
145
					 Arbres têtards de l'Isère
138
					 Arbres têtards de l'Isère
146
				</h1>
139
				</h1>
147
			</div>
140
			</div>
148
			<div class="row">
141
			<div class="row">
149
				<div class="col-md-6">
142
				<div class="col-md-6">
150
					<div id="intro" class="well well-lg">
143
					<div id="intro" class="well well-lg">
151
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
144
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
152
							<h3 class="titre">
145
							<h3 class="titre">
153
								Le Projet «&nbsp;Arbres Têtards&nbsp;»
146
								Le Projet «&nbsp;Arbres Têtards&nbsp;»
154
								<span class="glyphicon glyphicon-plus-sign"></span>
147
								<span class="glyphicon glyphicon-plus-sign"></span>
155
							</h3>
148
							</h3>
156
						</a>
149
						</a>
157
						<div id="intro-txt" class="collapse in">
150
						<div id="intro-txt" class="collapse in">
158
							<p>
151
							<p>
159
								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>,
160
								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
161
								leur richesse écologique, ils font partie de notre patrimoine.<br />
154
								leur richesse écologique, ils font partie de notre patrimoine.<br />
162
								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
163
								rurales, ces arbres remarquables disparaissent !
156
								rurales, ces arbres remarquables disparaissent !
164
							</p>
157
							</p>
165
							<p>
158
							<p>
166
								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>
167
								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
168
								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,
169
								de restaurer ceux à l’abandon et d’en replanter.
162
								de restaurer ceux à l’abandon et d’en replanter.
170
							</p>
163
							</p>
171
							<p>
164
							<p>
172
								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
173
								département de l’Isère.
166
								département de l’Isère.
174
								<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 />
175
								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
176
								à l’aide du formulaire suivant.
169
								à l’aide du formulaire suivant.
177
							</p>
170
							</p>
178
						</div>
171
						</div>
179
					</div>
172
					</div>
180
				</div>
173
				</div>
181
 
174
 
182
				<div class="col-md-6">
175
				<div class="col-md-6">
183
					<div id="aide" class="well well-lg">
176
					<div id="aide" class="well well-lg">
184
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
177
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
185
							<h3 class="titre">
178
							<h3 class="titre">
186
								Aide
179
								Aide
187
								<span class="glyphicon glyphicon-plus-sign"></span>
180
								<span class="glyphicon glyphicon-plus-sign"></span>
188
							</h3>
181
							</h3>
189
						</a>
182
						</a>
190
						<div id="aide-txt" class="collapse in">
183
						<div id="aide-txt" class="collapse in">
191
							<p>
184
							<p>
192
								Cet outil vous permet de partager simplement vos observations avec
185
								Cet outil vous permet de partager simplement vos observations avec
193
								<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
194
								<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>
195
								(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>).
196
								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
197
								<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>.
198
								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'.
199
								Elles apparaissent immédiatement sur les
192
								Elles apparaissent immédiatement sur les
200
								<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.
201
							</p>
194
							</p>
202
							<p class="discretion">
195
							<p class="discretion">
203
								Pour toute question ou remarque,
196
								Pour toute question ou remarque,
204
								<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']); ?>"
205
									target="_blank"
198
									target="_blank"
206
									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;">
207
									contactez-nous</a>
200
									contactez-nous</a>
208
							</p>
201
							</p>
209
							<p class="discretion">
202
							<p class="discretion">
210
								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;:
211
								<button id="btn-aide" class="btn btn-xs btn-success">
204
								<button id="btn-aide" class="btn btn-xs btn-success">
212
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
205
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
213
									<span id="btn-aide-txt">Désactiver l'aide</span>
206
									<span id="btn-aide-txt">Désactiver l'aide</span>
214
								</button>
207
								</button>
215
							</p>
208
							</p>
216
						</div>
209
						</div>
217
					</div>
210
					</div>
218
				</div>
211
				</div>
219
			</div>
212
			</div>
220
 
213
 
221
			<div class="well well-lg">
214
			<div class="well well-lg">
222
				<h2>Observateur</h2>
215
				<h2>Observateur</h2>
223
				<form id="form-observateur" role="form" autocomplete="on">
216
				<form id="form-observateur" role="form" autocomplete="on">
224
					<div class="row">
217
					<div class="row">
225
						<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"
226
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
219
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
227
								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
228
								ultérieurement. Des informations complémentaires vont vous être
221
								ultérieurement. Des informations complémentaires vont vous être
229
								demandées : prénom et nom.">
222
								demandées : prénom et nom.">
230
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
223
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
231
								<strong class="obligatoire">*</strong>
224
								<strong class="obligatoire">*</strong>
232
								Courriel
225
								Courriel
233
							</label>
226
							</label>
234
							<div class="input-group">
227
							<div class="input-group">
235
								<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>
236
								<input id="courriel" name="courriel" class="form-control" type="text"/>
229
								<input id="courriel" name="courriel" class="form-control" type="text"/>
237
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
230
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
238
							</div>
231
							</div>
239
						</div>
232
						</div>
240
						<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">
241
							<label for="courriel_confirmation" title="Veuillez confirmer le courriel.">
234
							<label for="courriel_confirmation" title="Veuillez confirmer le courriel.">
242
								<strong class="obligatoire">*</strong> Courriel (confirmation)
235
								<strong class="obligatoire">*</strong> Courriel (confirmation)
243
							</label>
236
							</label>
244
							<div class="input-group">
237
							<div class="input-group">
245
								<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>
246
								<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"/>
247
							</div>
240
							</div>
248
						</div>
241
						</div>
249
					</div>
242
					</div>
250
					<div id="zone-prenom-nom" class="row hidden">
243
					<div id="zone-prenom-nom" class="row hidden">
251
						<div class="col-md-6 form-group">
244
						<div class="col-md-6 form-group">
252
							<label for="prenom">Prénom</label>
245
							<label for="prenom">Prénom</label>
253
							<div class="input-group">
246
							<div class="input-group">
254
								<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>
255
								<input id="prenom" name="prenom" class="form-control" type="text"/>
248
								<input id="prenom" name="prenom" class="form-control" type="text"/>
256
							</div>
249
							</div>
257
						</div>
250
						</div>
258
						<div class="col-md-6 form-group">
251
						<div class="col-md-6 form-group">
259
							<label for="nom">Nom</label>
252
							<label for="nom">Nom</label>
260
							<div class="input-group">
253
							<div class="input-group">
261
								<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>
262
								<input id="nom" name="nom" class="form-control" type="text"/>
255
								<input id="nom" name="nom" class="form-control" type="text"/>
263
							</div>
256
							</div>
264
						</div>
257
						</div>
265
					</div>
258
					</div>
266
				</form>
259
				</form>
267
			</div>
260
			</div>
268
 
261
 
269
			<!-- Messages d'erreur du formulaire-->
262
			<!-- Messages d'erreur du formulaire-->
270
			<div class="row">
263
			<div class="row">
271
				<div class="zone-alerte col-md-6 col-md-offset-3">
264
				<div class="zone-alerte col-md-6 col-md-offset-3">
272
					<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;">
273
						<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>
274
						<h4 class="alert-heading">Information : copier/coller</h4>
267
						<h4 class="alert-heading">Information : copier/coller</h4>
275
						<p>
268
						<p>
276
							Merci de ne pas copier/coller votre courriel.<br/>
269
							Merci de ne pas copier/coller votre courriel.<br/>
277
							La double saisie permet de vérifier l'absence d'erreurs.
270
							La double saisie permet de vérifier l'absence d'erreurs.
278
						</p>
271
						</p>
279
					</div>
272
					</div>
280
					<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;">
281
						<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>
282
						<h4 class="alert-heading">Information : courriel introuvable</h4>
275
						<h4 class="alert-heading">Information : courriel introuvable</h4>
283
						<p>
276
						<p>
284
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
277
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
285
							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/>
286
							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>,
287
							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>.
288
						</p>
281
						</p>
289
					<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;">
290
						<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>
291
						<h4 class="alert-heading">Information sur Google Maps</h4>
284
						<h4 class="alert-heading">Information sur Google Maps</h4>
292
						<div class="contenu"></div>
285
						<div class="contenu"></div>
293
					</div>
286
					</div>
294
				</div>
287
				</div>
295
			</div>
288
			</div>
296
 
289
 
297
			<div class="well well-lg">
290
			<div class="well well-lg">
298
				<div class="row">
291
				<div class="row">
299
					<div class="col-md-12">
292
					<div class="col-md-12">
300
						<h2>Lieu du relevé</h2>
293
						<h2>Lieu du relevé</h2>
301
					</div>
294
					</div>
302
				</div>
295
				</div>
303
				<div class="row">
296
				<div class="row">
304
					<div class="col-md-6">
297
					<div class="col-md-6">
305
						<div class="row">
298
						<div class="row">
306
							<div class="col-md-3">
299
							<div class="col-md-3">
307
								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
300
								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
308
							</div>
301
							</div>
309
							<div class="col-md-9 text-right">
302
							<div class="col-md-9 text-right">
310
								<form id="form-carte-recherche" class="form-horizontal" role="form">
303
								<form id="form-carte-recherche" class="form-horizontal" role="form">
311
									<div class="form-group">
304
									<div class="form-group">
312
										<label for="carte-recherche" class="sr-only">Rechercher</label>
305
										<label for="carte-recherche" class="sr-only">Rechercher</label>
313
										<div class="col-md-12">
306
										<div class="col-md-12">
314
											<div class="input-group">
307
											<div class="input-group">
315
												<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=""
316
														title="Permet de centrer la carte sur le lieu recherché."
309
														title="Permet de centrer la carte sur le lieu recherché."
317
														placeholder="Centrer la carte sur un lieu..."/>
310
														placeholder="Centrer la carte sur un lieu..."/>
318
												<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>
319
											</div>
312
											</div>
320
										</div>
313
										</div>
321
									</div>
314
									</div>
322
								</form>
315
								</form>
323
							</div>
316
							</div>
324
						</div>
317
						</div>
325
						<div class="row">
318
						<div class="row">
326
							<div class="col-md-12">
319
							<div class="col-md-12">
327
								<div id="map-canvas" class="has-tooltip"
320
								<div id="map-canvas" class="has-tooltip"
328
									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
329
										représentant votre station ou bien le glisser-déposer sur
322
										représentant votre station ou bien le glisser-déposer sur
330
										le lieu souhaité."></div>
323
										le lieu souhaité."></div>
331
							</div>
324
							</div>
332
						</div>
325
						</div>
333
						<div class="row">
326
						<div class="row">
334
							<div id="info-altitude" class="col-md-5">
327
							<div id="info-altitude" class="col-md-5">
335
								<span>Altitude : </span>
328
								<span>Altitude : </span>
336
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
329
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
337
							</div>
330
							</div>
338
 
331
 
339
							<div id="info-commune" class="col-md-7">
332
							<div id="info-commune" class="col-md-7">
340
								<span>Commune : </span>
333
								<span>Commune : </span>
341
								<span id="marqueur-commune">
334
								<span id="marqueur-commune">
342
									<span id="commune-nom" class="commune-info"></span>
335
									<span id="commune-nom" class="commune-info"></span>
343
									(<span id="commune-code-insee" class="commune-info has-tooltip"
336
									(<span id="commune-code-insee" class="commune-info has-tooltip"
344
										title="Code INSEE de la commune"></span>)
337
										title="Code INSEE de la commune"></span>)
345
								</span>
338
								</span>
346
							</div>
339
							</div>
347
						</div>
340
						</div>
348
					</div>
341
					</div>
349
					<div class="col-md-6">
342
					<div class="col-md-6">
350
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
343
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
351
							<div class="form-group has-tooltip"
344
							<div class="form-group has-tooltip"
352
								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." >
353
								<label for="lieudit" class="col-sm-2 control-label">
346
								<label for="lieudit" class="col-sm-2 control-label">
354
									Lieu-dit
347
									Lieu-dit
355
								</label>
348
								</label>
356
								<div class="col-sm-10">
349
								<div class="col-sm-10">
357
									<input id="lieudit" name="lieudit" class="form-control" type="text" />
350
									<input id="lieudit" name="lieudit" class="form-control" type="text" />
358
								</div>
351
								</div>
359
							</div>
352
							</div>
360
 
353
 
361
							<div class="form-group has-tooltip"
354
							<div class="form-group has-tooltip"
362
								title="Sélectionnez une ou plusieurs situations correspondant au site.">
355
								title="Sélectionnez une ou plusieurs situations correspondant au site.">
363
								<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>
364
								<div id="milieux-controls" class="col-sm-10">
357
								<div id="milieux-controls" class="col-sm-10">
365
									<div class="btn-group dropdown">
358
									<div class="btn-group dropdown">
366
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
359
										<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
367
											<span class="glyphicon glyphicon-globe"></span>
360
											<span class="glyphicon glyphicon-globe"></span>
368
											Sélectionner une ou plusieurs situations
361
											Sélectionner une ou plusieurs situations
369
											<span class="caret"></span>
362
											<span class="caret"></span>
370
										</button>
363
										</button>
371
										<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">
372
											<li class="checkbox" role="presentation">
365
											<li class="checkbox" role="presentation">
373
												<a role="menuitem">
366
												<a role="menuitem">
374
													<label>
367
													<label>
375
														<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"/>
376
														Séparation de parcelle
369
														Séparation de parcelle
377
													</label>
370
													</label>
378
												</a>
371
												</a>
379
											</li>
372
											</li>
380
											<li class="checkbox" role="presentation">
373
											<li class="checkbox" role="presentation">
381
												<a role="menuitem">
374
												<a role="menuitem">
382
													<label>
375
													<label>
383
														<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"/>
384
														Proximité de bâtiment
377
														Proximité de bâtiment
385
													</label>
378
													</label>
386
												</a>
379
												</a>
387
											</li>
380
											</li>
388
											<li class="checkbox" role="presentation">
381
											<li class="checkbox" role="presentation">
389
												<a role="menuitem">
382
												<a role="menuitem">
390
													<label>
383
													<label>
391
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plein champ"/>
384
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plein champ"/>
392
														Plein champ
385
														Plein champ
393
													</label>
386
													</label>
394
												</a>
387
												</a>
395
											</li>
388
											</li>
396
											<li class="checkbox" role="presentation">
389
											<li class="checkbox" role="presentation">
397
												<a role="menuitem">
390
												<a role="menuitem">
398
													<label>
391
													<label>
399
														<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"/>
400
														Jardin de particulier
393
														Jardin de particulier
401
													</label>
394
													</label>
402
												</a>
395
												</a>
403
											</li>
396
											</li>
404
											<li class="checkbox" role="presentation">
397
											<li class="checkbox" role="presentation">
405
												<a role="menuitem">
398
												<a role="menuitem">
406
													<label>
399
													<label>
407
														<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"/>
408
														Bord de cours d'eau
401
														Bord de cours d'eau
409
													</label>
402
													</label>
410
												</a>
403
												</a>
411
											</li>
404
											</li>
412
											<li class="checkbox" role="presentation">
405
											<li class="checkbox" role="presentation">
413
												<a role="menuitem">
406
												<a role="menuitem">
414
													<label>
407
													<label>
415
														<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"/>
416
														Bord de chemin
409
														Bord de chemin
417
													</label>
410
													</label>
418
												</a>
411
												</a>
419
											</li>
412
											</li>
420
											<li class="checkbox" role="presentation">
413
											<li class="checkbox" role="presentation">
421
												<a role="menuitem">
414
												<a role="menuitem">
422
													<label>
415
													<label>
423
														<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"/>
424
														Intégré à une haie
417
														Intégré à une haie
425
													</label>
418
													</label>
426
												</a>
419
												</a>
427
											</li>
420
											</li>
428
											<li class="checkbox" role="presentation">
421
											<li class="checkbox" role="presentation">
429
												<a role="menuitem">
422
												<a role="menuitem">
430
													<label>
423
													<label>
431
														<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"/>
432
														En forêt
425
														En forêt
433
													</label>
426
													</label>
434
												</a>
427
												</a>
435
											</li>
428
											</li>
436
											<li class="checkbox" role="presentation">
429
											<li class="checkbox" role="presentation">
437
												<a role="menuitem">
430
												<a role="menuitem">
438
													<label>
431
													<label>
439
														<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"/>
440
														En zone humide
433
														En zone humide
441
													</label>
434
													</label>
442
												</a>
435
												</a>
443
											</li>
436
											</li>
444
										</ul>
437
										</ul>
445
									</div>
438
									</div>
446
								</div>
439
								</div>
447
							</div>
440
							</div>
448
 
441
 
449
							<div class="row">
442
							<div class="row">
450
								<div class="col-md-12">
443
								<div class="col-md-12">
451
									<button class="afficher-coord btn-coord btn btn-default"
444
									<button class="afficher-coord btn-coord btn btn-default"
452
											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)">
453
										Afficher les coordonnées (WGS 84 et Lambert 93)
446
										Afficher les coordonnées (WGS 84 et Lambert 93)
454
									</button>
447
									</button>
455
									<div id="coordonnees-geo" class="well hidden">
448
									<div id="coordonnees-geo" class="well hidden">
456
										<div class="row">
449
										<div class="row">
457
											<div class="col-md-4">
450
											<div class="col-md-4">
458
												<div id="coord-lat" class="form-group form-group-sm">
451
												<div id="coord-lat" class="form-group form-group-sm">
459
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
452
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
460
													<div class="col-sm-8">
453
													<div class="col-sm-8">
461
														<input id="latitude" class="form-control" name="latitude" type="text"
454
														<input id="latitude" class="form-control" name="latitude" type="text"
462
															title="Latitude (WGS 84)" value=""/>
455
															title="Latitude (WGS 84)" value=""/>
463
													</div>
456
													</div>
464
												</div>
457
												</div>
465
											</div>
458
											</div>
466
											<div class="col-md-5">
459
											<div class="col-md-5">
467
												<div id="coord-lng" class="form-group form-group-sm">
460
												<div id="coord-lng" class="form-group form-group-sm">
468
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
461
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
469
													<div class="col-sm-8">
462
													<div class="col-sm-8">
470
														<input id="longitude" class="form-control" name="longitude" type="text"
463
														<input id="longitude" class="form-control" name="longitude" type="text"
471
															title="Longitude (WGS 84)" value=""/>
464
															title="Longitude (WGS 84)" value=""/>
472
													</div>
465
													</div>
473
												</div>
466
												</div>
474
											</div>
467
											</div>
475
											<div class="col-md-2">
468
											<div class="col-md-2">
476
												<div id="coord-lng" class="form-group form-group-sm">
469
												<div id="coord-lng" class="form-group form-group-sm">
477
													<input type="button" id="geolocaliser"
470
													<input type="button" id="geolocaliser"
478
														class="btn btn-default btn-sm has-tooltip"
471
														class="btn btn-default btn-sm has-tooltip"
479
														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."
480
														value="Voir sur la carte"/>
473
														value="Voir sur la carte"/>
481
												</div>
474
												</div>
482
											</div>
475
											</div>
483
										</div>
476
										</div>
484
 
477
 
485
										<div class="row">
478
										<div class="row">
486
											<div class="col-md-6">
479
											<div class="col-md-6">
487
												<div id="coord-l93-x" class="form-group">
480
												<div id="coord-l93-x" class="form-group">
488
													<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>
489
													<div class="col-sm-5">
482
													<div class="col-sm-5">
490
														<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"
491
																name="coordonneeLambert93X"
484
																name="coordonneeLambert93X"
492
																data-label="Lambert 93 X"
485
																data-label="Lambert 93 X"
493
																value=""/>
486
																value=""/>
494
													</div>
487
													</div>
495
												</div>
488
												</div>
496
											</div>
489
											</div>
497
											<div class="col-md-6">
490
											<div class="col-md-6">
498
												<div id="coord-l93-y" class="form-group">
491
												<div id="coord-l93-y" class="form-group">
499
													<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>
500
													<div class="col-sm-5">
493
													<div class="col-sm-5">
501
														<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"
502
																name="coordonneeLambert93Y"
495
																name="coordonneeLambert93Y"
503
																data-label="Lambert 93 Y"
496
																data-label="Lambert 93 Y"
504
																value=""/>
497
																value=""/>
505
													</div>
498
													</div>
506
												</div>
499
												</div>
507
											</div>
500
											</div>
508
										</div>
501
										</div>
509
									</div>
502
									</div>
510
								</div>
503
								</div>
511
							</div>
504
							</div>
512
						</form>
505
						</form>
513
					</div>
506
					</div>
514
				</div>
507
				</div>
515
 
508
 
516
				<div class="row">
509
				<div class="row">
517
					<div class="col-md-6">
510
					<div class="col-md-6">
518
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
511
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
519
							<h2>Arbre observé</h2>
512
							<h2>Arbre observé</h2>
520
							<input id="referentiel" type="hidden" value="bdtfx" />
513
							<input id="referentiel" type="hidden" value="bdtfx" />
521
 
514
 
522
							<div class="form-group has-tooltip"
515
							<div class="form-group has-tooltip"
523
									title="Vous pouvez cliquer sur l'icône de calendrier pour
516
									title="Vous pouvez cliquer sur l'icône de calendrier pour
524
										sélectionner une date dans un calendrier.">
517
										sélectionner une date dans un calendrier.">
525
								<label for="date" class=" col-sm-4 control-label"
518
								<label for="date" class=" col-sm-4 control-label"
526
									   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">
527
									<strong class="obligatoire">*</strong>
520
									<strong class="obligatoire">*</strong>
528
									Date du relevé
521
									Date du relevé
529
								</label>
522
								</label>
530
								<div class="col-sm-8">
523
								<div class="col-sm-8">
531
									<div class="input-group">
524
									<div class="input-group">
532
										<span id="date-icone" class="input-group-addon add-on"></span>
525
										<span id="date-icone" class="input-group-addon add-on"></span>
533
										<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" />
534
									</div>
527
									</div>
535
								</div>
528
								</div>
536
							</div>
529
							</div>
537
 
530
 
538
							<div id="taxon-liste-input-groupe" class="form-group has-tooltip"
531
							<div id="taxon-liste-input-groupe" class="form-group has-tooltip"
539
								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
540
								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»." >
541
								<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.">
542
									<strong class="obligatoire">*</strong>
535
									<strong class="obligatoire">*</strong>
543
									Espèces
536
									Espèces
544
								</label>
537
								</label>
545
								<div class="col-sm-8">
538
								<div class="col-sm-8">
546
									<div class="input-group">
539
									<div class="input-group">
547
										<span class="input-group-addon">
540
										<span class="input-group-addon">
548
											<span class="glyphicon glyphicon-leaf"></span>
541
											<span class="glyphicon glyphicon-leaf"></span>
549
										</span>
542
										</span>
550
 
543
 
551
										<select id="taxon-liste" name="taxon-liste" class="form-control">
544
										<select id="taxon-liste" name="taxon-liste" class="form-control">
552
											<option value="" selected>Sélectionner une espèce</option>
545
											<option value="" selected>Sélectionner une espèce</option>
553
 
546
 
554
											<optgroup id="taxon-liste-noms">
547
											<optgroup id="taxon-liste-noms">
555
												<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
548
												<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
556
													<option
549
													<option
557
														class="<?=$taxon['nom_type'] ?>"
550
														class="<?=$taxon['nom_type'] ?>"
558
														value="<?=$taxon['num_nom'] ?>"
551
														value="<?=$taxon['num_nom'] ?>"
559
														title="<?=$taxon['nom_title'] ?>"
552
														title="<?=$taxon['nom_title'] ?>"
560
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
553
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
561
														>
554
														>
562
														<?=$taxon['nom_a_afficher']?>
555
														<?=$taxon['nom_a_afficher']?>
563
													</option>
556
													</option>
564
												<?php endforeach; ?>
557
												<?php endforeach; ?>
565
											</optgroup>
558
											</optgroup>
566
											<optgroup id="taxon-liste-special">
559
											<optgroup id="taxon-liste-special">
567
												<?php foreach ($taxons['speciaux'] as $taxon) :?>
560
												<?php foreach ($taxons['speciaux'] as $taxon) :?>
568
													<option
561
													<option
569
														class="<?=$taxon['nom_type'] ?>"
562
														class="<?=$taxon['nom_type'] ?>"
570
														value="<?=$taxon['num_nom'] ?>"
563
														value="<?=$taxon['num_nom'] ?>"
571
														title="<?=$taxon['nom_title'] ?>"
564
														title="<?=$taxon['nom_title'] ?>"
572
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
565
														data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
573
														>
566
														>
574
														<?=$taxon['nom_a_afficher']?>
567
														<?=$taxon['nom_a_afficher']?>
575
													</option>
568
													</option>
576
												<?php endforeach; ?>
569
												<?php endforeach; ?>
577
												<option value="?">Autre espèce</option>
570
												<option value="?">Autre espèce</option>
578
											</optgroup>
571
											</optgroup>
579
										</select>
572
										</select>
580
									</div>
573
									</div>
581
								</div>
574
								</div>
582
							</div>
575
							</div>
583
 
576
 
584
							<div id="taxon-input-groupe" class="form-group has-tooltip hidden"
577
							<div id="taxon-input-groupe" class="form-group has-tooltip hidden"
585
								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')." >
586
								<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.">
587
									<strong class="obligatoire">*</strong>
580
									<strong class="obligatoire">*</strong>
588
									Autre espèce
581
									Autre espèce
589
								</label>
582
								</label>
590
								<div class="col-sm-8">
583
								<div class="col-sm-8">
591
									<input id="taxon" name="taxon" type="text" class="form-control"
584
									<input id="taxon" name="taxon" type="text" class="form-control"
592
										placeholder="Autre espèce (ou indication sur la plante)"
585
										placeholder="Autre espèce (ou indication sur la plante)"
593
										value="<?= $nom_sci_espece_defaut; ?>" />
586
										value="<?= $nom_sci_espece_defaut; ?>" />
594
								</div>
587
								</div>
595
							</div>
588
							</div>
596
 
589
 
597
							<div class="form-group has-tooltip"
590
							<div class="form-group has-tooltip"
598
									title="Indiquez la certitude de votre détermination.">
591
									title="Indiquez la certitude de votre détermination.">
599
								<label for="certitude" class="col-sm-4 control-label">
592
								<label for="certitude" class="col-sm-4 control-label">
600
									<strong class="obligatoire">*</strong>
593
									<strong class="obligatoire">*</strong>
601
									Identification de l'arbre
594
									Identification de l'arbre
602
								</label>
595
								</label>
603
								<div class="col-sm-8">
596
								<div class="col-sm-8">
604
									<select id="certitude" class="form-control" name="certitude">
597
									<select id="certitude" class="form-control" name="certitude">
605
										<option selected value="">Sélectionner une certitude</option>
598
										<option selected value="">Sélectionner une certitude</option>
606
										<option value="Certaine">Certaine</option>
599
										<option value="Certaine">Certaine</option>
607
										<option value="Douteuse">Douteuse</option>
600
										<option value="Douteuse">Douteuse</option>
608
										<option value="A déterminer">À déterminer</option>
601
										<option value="A déterminer">À déterminer</option>
609
									</select>
602
									</select>
610
								</div>
603
								</div>
611
							</div>
604
							</div>
612
 
605
 
613
							<div class="form-group has-tooltip"
606
							<div class="form-group has-tooltip"
614
									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.">
615
								<label for="formation" class="col-sm-4 control-label">
608
								<label for="formation" class="col-sm-4 control-label">
616
									<strong class="obligatoire">*</strong>
609
									<strong class="obligatoire">*</strong>
617
									Formation
610
									Formation
618
								</label>
611
								</label>
619
								<div class="col-sm-8 select-container">
612
								<div class="col-sm-8 select-container">
620
									<select id="formation" class="form-control obs-chp-etendu"
613
									<select id="formation" class="form-control obs-chp-etendu"
621
											name="arbreTetardFormation"
614
											name="arbreTetardFormation"
622
											data-label="Type de formation">
615
											data-label="Type de formation">
623
										<option selected value="">Sélectionner une formation</option>
616
										<option selected value="">Sélectionner une formation</option>
624
										<option value="alignement">Arbres d'alignement</option>
617
										<option value="alignement">Arbres d'alignement</option>
625
										<option value="isolé">Arbre isolé</option>
618
										<option value="isolé">Arbre isolé</option>
626
									</select>
619
									</select>
627
								</div>
620
								</div>
628
							</div>
621
							</div>
629
 
622
 
630
							<div id="aligne-nbre-groupe" class="form-group has-tooltip hidden"
623
							<div id="aligne-nbre-groupe" class="form-group has-tooltip hidden"
631
								title="Indiquez le nombre d'arbres têtards alignés." >
624
								title="Indiquez le nombre d'arbres têtards alignés." >
632
								<label for="aligne-nbre" class="col-sm-4 control-label">
625
								<label for="aligne-nbre" class="col-sm-4 control-label">
633
									<strong class="obligatoire">*</strong>
626
									<strong class="obligatoire">*</strong>
634
									Nombre d'arbres
627
									Nombre d'arbres
635
								</label>
628
								</label>
636
								<div class="col-sm-4">
629
								<div class="col-sm-4">
637
									<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"
638
										min="2"
631
										min="2"
639
										name="arbreTetardAligneNbre"
632
										name="arbreTetardAligneNbre"
640
										data-label="Nombre d'arbres d'alignement"
633
										data-label="Nombre d'arbres d'alignement"
641
										value="" />
634
										value="" />
642
								</div>
635
								</div>
643
							</div>
636
							</div>
644
 
637
 
645
							<div class="form-group has-tooltip"
638
							<div class="form-group has-tooltip"
646
									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.">
647
								<label for="cavites" class="col-sm-4 control-label">
640
								<label for="cavites" class="col-sm-4 control-label">
648
									Cavités
641
									Cavités
649
								</label>
642
								</label>
650
								<div class="col-sm-8">
643
								<div class="col-sm-8">
651
									<select id="cavites" class="form-control obs-chp-etendu"
644
									<select id="cavites" class="form-control obs-chp-etendu"
652
											name="arbreTetardPresenceCavite"
645
											name="arbreTetardPresenceCavite"
653
											data-label="Présence de cavités">
646
											data-label="Présence de cavités">
654
										<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>
655
										<option value="aucune">Aucune</option>
648
										<option value="aucune">Aucune</option>
656
										<option value="petite">Oui, petite(s)</option>
649
										<option value="petite">Oui, petite(s)</option>
657
										<option value="grande">Oui, grande(s)</option>
650
										<option value="grande">Oui, grande(s)</option>
658
									</select>
651
									</select>
659
								</div>
652
								</div>
660
							</div>
653
							</div>
661
 
654
 
662
							<div class="form-group has-tooltip"
655
							<div class="form-group has-tooltip"
663
									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.">
664
								<label for="circonference" class="col-sm-4 control-label">
657
								<label for="circonference" class="col-sm-4 control-label">
665
									Circonférence
658
									Circonférence
666
								</label>
659
								</label>
667
								<div class="col-sm-8">
660
								<div class="col-sm-8">
668
									<select id="circonference" class="form-control obs-chp-etendu"
661
									<select id="circonference" class="form-control obs-chp-etendu"
669
											name="arbreTetardClasseCirconferenceA1m"
662
											name="arbreTetardClasseCirconferenceA1m"
670
											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)">
671
										<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>
672
										<option value="0-0,5">0 à 0,5m</option>
665
										<option value="0-0,5">0 à 0,5m</option>
673
										<option value="0,5-2">0,5 à 2m</option>
666
										<option value="0,5-2">0,5 à 2m</option>
674
										<option value="2-3">2 à 3m</option>
667
										<option value="2-3">2 à 3m</option>
675
										<option value="+3">&gt; à 3m</option>
668
										<option value="+3">&gt; à 3m</option>
676
									</select>
669
									</select>
677
								</div>
670
								</div>
678
							</div>
671
							</div>
679
 
672
 
680
							<div class="form-group has-tooltip"
673
							<div class="form-group has-tooltip"
681
									title="Indiquez la hauteur de la tête.">
674
									title="Indiquez la hauteur de la tête.">
682
								<label for="hauteur-tete" class="col-sm-4 control-label">
675
								<label for="hauteur-tete" class="col-sm-4 control-label">
683
									Hauteur de la tête
676
									Hauteur de la tête
684
								</label>
677
								</label>
685
								<div class="col-sm-8">
678
								<div class="col-sm-8">
686
									<select id="hauteur-tete" class="form-control obs-chp-etendu"
679
									<select id="hauteur-tete" class="form-control obs-chp-etendu"
687
											name="arbreTetardHauteurTete"
680
											name="arbreTetardHauteurTete"
688
											data-label="Hauteur de la tête (en m)">
681
											data-label="Hauteur de la tête (en m)">
689
										<option selected value="">Sélectionner la hauteur</option>
682
										<option selected value="">Sélectionner la hauteur</option>
690
										<option value="0-1,5">0 à 1,5m</option>
683
										<option value="0-1,5">0 à 1,5m</option>
691
										<option value="1,5-3">1,5 à 3m</option>
684
										<option value="1,5-3">1,5 à 3m</option>
692
										<option value="+3">&gt; à 3m</option>
685
										<option value="+3">&gt; à 3m</option>
693
									</select>
686
									</select>
694
								</div>
687
								</div>
695
							</div>
688
							</div>
696
 
689
 
697
							<div class="form-group">
690
							<div class="form-group">
698
								<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>
699
								<div class="col-sm-12">
692
								<div class="col-sm-12">
700
									<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"
701
										name="arbreTetardPresenceSp"
694
										name="arbreTetardPresenceSp"
702
										data-label="Présence d'espèces sur l'arbre"
695
										data-label="Présence d'espèces sur l'arbre"
703
										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>
704
								</div>
697
								</div>
705
							</div>
698
							</div>
706
						</form>
699
						</form>
707
					</div>
700
					</div>
708
 
701
 
709
					<div class="col-md-6">
702
					<div class="col-md-6">
710
						<form id="form-gestion" class="form-horizontal" role="form" autocomplete="on">
703
						<form id="form-gestion" class="form-horizontal" role="form" autocomplete="on">
711
							<h2>Gestion de l'arbre</h2>
704
							<h2>Gestion de l'arbre</h2>
712
 
705
 
713
							<div class="form-group has-tooltip"
706
							<div class="form-group has-tooltip"
714
									title="Indiquez le type de taille de l'arbre.">
707
									title="Indiquez le type de taille de l'arbre.">
715
								<label for="taille-type" class="col-sm-4 control-label">
708
								<label for="taille-type" class="col-sm-4 control-label">
716
									Type de taille
709
									Type de taille
717
								</label>
710
								</label>
718
								<div class="col-sm-8">
711
								<div class="col-sm-8">
719
									<div class="input-group">
712
									<div class="input-group">
720
										<select id="taille-type" class="form-control obs-chp-etendu"
713
										<select id="taille-type" class="form-control obs-chp-etendu"
721
												name="arbreTetardTailleType"
714
												name="arbreTetardTailleType"
722
												data-label="Type de taille">
715
												data-label="Type de taille">
723
											<option selected value="">Sélectionner le type de taille</option>
716
											<option selected value="">Sélectionner le type de taille</option>
724
											<option value="trogne">Trogne</option>
717
											<option value="trogne">Trogne</option>
725
											<option value="tête de chat">Tête de chat</option>
718
											<option value="tête de chat">Tête de chat</option>
726
											<option value="émonde">Émonde</option>
719
											<option value="émonde">Émonde</option>
727
											<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>
728
										</select>
721
										</select>
729
										<div class="input-group-btn">
722
										<div class="input-group-btn">
730
											<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">
731
												<span class="glyphicon glyphicon-info-sign"></span> Aide
724
												<span class="glyphicon glyphicon-info-sign"></span> Aide
732
											</button>
725
											</button>
733
										</div>
726
										</div>
734
									</div>
727
									</div>
735
								</div>
728
								</div>
736
							</div>
729
							</div>
737
 
730
 
738
							<div class="form-group has-tooltip"
731
							<div class="form-group has-tooltip"
739
									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.">
740
								<label for="entretien" class="col-sm-4 control-label">
733
								<label for="entretien" class="col-sm-4 control-label">
741
									Type d'entretien
734
									Type d'entretien
742
								</label>
735
								</label>
743
								<div class="col-sm-8">
736
								<div class="col-sm-8">
744
									<select id="entretien" class="form-control obs-chp-etendu"
737
									<select id="entretien" class="form-control obs-chp-etendu"
745
											name="arbreTetardEntretienCoupe"
738
											name="arbreTetardEntretienCoupe"
746
											data-label="Coupe d'entretien">
739
											data-label="Coupe d'entretien">
747
										<option selected value="">Sélectionner la périodicité des coupes</option>
740
										<option selected value="">Sélectionner la périodicité des coupes</option>
748
										<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>
749
										<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>
750
										<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>
751
									</select>
744
									</select>
752
								</div>
745
								</div>
753
							</div>
746
							</div>
754
 
747
 
755
							<div class="form-group has-tooltip"
748
							<div class="form-group has-tooltip"
756
									title="Indiquez l'état sanitaire de l'arbre têtard.">
749
									title="Indiquez l'état sanitaire de l'arbre têtard.">
757
								<label for="etat-sanitaire" class="col-sm-4 control-label">
750
								<label for="etat-sanitaire" class="col-sm-4 control-label">
758
									État sanitaire
751
									État sanitaire
759
								</label>
752
								</label>
760
								<div class="col-sm-8">
753
								<div class="col-sm-8">
761
									<select id="etat-sanitaire" class="form-control obs-chp-etendu"
754
									<select id="etat-sanitaire" class="form-control obs-chp-etendu"
762
											name="arbreTetardEtatSanitaire"
755
											name="arbreTetardEtatSanitaire"
763
											data-label="État sanitaire">
756
											data-label="État sanitaire">
764
										<option selected value="">Sélectionner l'état sanitaire</option>
757
										<option selected value="">Sélectionner l'état sanitaire</option>
765
										<option value="mort">Mort</option>
758
										<option value="mort">Mort</option>
766
										<option value="dépérissant">Dépérissant</option>
759
										<option value="dépérissant">Dépérissant</option>
767
										<option value="bon">Bon état général</option>
760
										<option value="bon">Bon état général</option>
768
									</select>
761
									</select>
769
								</div>
762
								</div>
770
							</div>
763
							</div>
771
						</form>
764
						</form>
772
 
765
 
773
						<div class="row">
766
						<div class="row">
774
							<div class="col-md-12">
767
							<div class="col-md-12">
775
								<h2>Notes</h2>
768
								<h2>Notes</h2>
776
								<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"
777
									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>
778
							</div>
771
							</div>
779
						</div>
772
						</div>
780
 
773
 
781
						<div class="row">
774
						<div class="row">
782
							<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 ?>"
783
								method="post" enctype="multipart/form-data">
776
								method="post" enctype="multipart/form-data">
784
								<div class="col-md-12">
777
								<div class="col-md-12">
785
									<h2>Image(s) de l'arbre</h2>
778
									<h2>Image(s) de l'arbre</h2>
786
									<strong>Ajouter une image</strong>
779
									<strong>Ajouter une image</strong>
787
									<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>
788
									<div id ="photos-conteneur" class="form-group">
781
									<div id ="photos-conteneur" class="form-group">
789
										<div class="col-sm-12">
782
										<div class="col-sm-12">
790
											<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" />
791
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
784
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
792
										</div>
785
										</div>
793
										<div id="miniatures"></div>
786
										<div id="miniatures"></div>
794
										<p class="miniature-msg col-md-12">&nbsp;</p>
787
										<p class="miniature-msg col-md-12">&nbsp;</p>
795
									</div>
788
									</div>
796
								</div>
789
								</div>
797
							</form>
790
							</form>
798
						</div>
791
						</div>
799
					</div>
792
					</div>
800
				</div>
793
				</div>
801
 
794
 
802
				<div class="row">
795
				<div class="row">
803
					<div class="col-md-12 centre has-tooltip"
796
					<div class="col-md-12 centre has-tooltip"
804
						title="Une fois les champs remplis, cliquez sur ce bouton pour
797
						title="Une fois les champs remplis, cliquez sur ce bouton pour
805
							ajouter votre observation à la liste à transmettre.">
798
							ajouter votre observation à la liste à transmettre.">
806
						<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">
807
							Créer
800
							Créer
808
						</button>
801
						</button>
809
					</div>
802
					</div>
810
				</div>
803
				</div>
811
			</div>
804
			</div>
812
 
805
 
813
			<!-- Messages d'erreur du formulaire-->
806
			<!-- Messages d'erreur du formulaire-->
814
			<div class="row">
807
			<div class="row">
815
				<div class="zone-alerte col-md-6 col-md-offset-3">
808
				<div class="zone-alerte col-md-6 col-md-offset-3">
816
					<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;">
817
						<a class="close">×</a>
810
						<a class="close">×</a>
818
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
811
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
819
						<p>
812
						<p>
820
							Vous venez d'ajouter votre 10ème observation.<br/>
813
							Vous venez d'ajouter votre 10ème observation.<br/>
821
							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.
822
						</p>
815
						</p>
823
					</div>
816
					</div>
824
				</div>
817
				</div>
825
				<div class="zone-alerte col-md-6 col-md-offset-3">
818
				<div class="zone-alerte col-md-6 col-md-offset-3">
826
					<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;">
827
						<a class="close">×</a>
820
						<a class="close">×</a>
828
						<h4 class="alert-heading">Information : champs en erreur</h4>
821
						<h4 class="alert-heading">Information : champs en erreur</h4>
829
						<p>
822
						<p>
830
							Certains champs du formulaire sont mal remplis.<br/>
823
							Certains champs du formulaire sont mal remplis.<br/>
831
							Veuillez vérifier vos données.
824
							Veuillez vérifier vos données.
832
						</p>
825
						</p>
833
					</div>
826
					</div>
834
				</div>
827
				</div>
835
			</div>
828
			</div>
836
 
829
 
837
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
830
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
838
			<div id="zone-liste-obs" class="row">
831
			<div id="zone-liste-obs" class="row">
839
				<div class="col-md-12">
832
				<div class="col-md-12">
840
					<div class="well well-lg">
833
					<div class="well well-lg">
841
						<div class="row">
834
						<div class="row">
842
							<div class="col-md-8">
835
							<div class="col-md-8">
843
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
836
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
844
							</div>
837
							</div>
845
							<div class="col-md-4 text-right">
838
							<div class="col-md-4 text-right">
846
								<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"
847
									type="button" disabled="disabled"
840
									type="button" disabled="disabled"
848
									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.">
849
									Transmettre
842
									Transmettre
850
								</button>
843
								</button>
851
							</div>
844
							</div>
852
						</div>
845
						</div>
853
						<div id="liste-obs" ></div>
846
						<div id="liste-obs" ></div>
854
						<div class="row">
847
						<div class="row">
855
							<div class="zone-alerte col-md-6 col-md-offset-3">
848
							<div class="zone-alerte col-md-6 col-md-offset-3">
856
								<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;">
857
									<a class="close">×</a>
850
									<a class="close">×</a>
858
									<h4 class="alert-heading">Attention : aucune observation</h4>
851
									<h4 class="alert-heading">Attention : aucune observation</h4>
859
									<p>Veuillez saisir des observations pour les transmettre.</p>
852
									<p>Veuillez saisir des observations pour les transmettre.</p>
860
								</div>
853
								</div>
861
 
854
 
862
								<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;"">
863
									<a class="close">×</a>
856
									<a class="close">×</a>
864
									<h4 class="alert-heading">Information : transmission des observations</h4>
857
									<h4 class="alert-heading">Information : transmission des observations</h4>
865
									<div class="alert-txt"></div>
858
									<div class="alert-txt"></div>
866
								</div>
859
								</div>
867
 
860
 
868
								<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;">
869
									<a class="close">×</a>
862
									<a class="close">×</a>
870
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
863
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
871
									<div class="alert-txt"></div>
864
									<div class="alert-txt"></div>
872
								</div>
865
								</div>
873
							</div>
866
							</div>
874
						</div>
867
						</div>
875
 
868
 
876
					</div>
869
					</div>
877
				</div>
870
				</div>
878
			</div>
871
			</div>
879
 
872
 
880
			<footer class="row">
873
			<footer class="row">
881
				<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>
882
			</footer>
875
			</footer>
883
 
876
 
884
			<!-- Templates HTML -->
877
			<!-- Templates HTML -->
885
			<div id="tpl-transmission-ok" style="display:none;">
878
			<div id="tpl-transmission-ok" style="display:none;">
886
				<p class="msg">
879
				<p class="msg">
887
					Vos observations ont bien été transmises.<br />
880
					Vos observations ont bien été transmises.<br />
888
					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
889
					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>,
890
					<a href="http://www.tela-botanica.org/appli:pictoflora">Pictoflora</a>,
883
					<a href="http://www.tela-botanica.org/appli:pictoflora">Pictoflora</a>,
891
					<a href="http://www.tela-botanica.org/appli:del">Identiplante</a>,
884
					<a href="http://www.tela-botanica.org/appli:del">Identiplante</a>,
892
					<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 />
893
					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
894
					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 />
895
					N'oubliez pas qu'il est nécessaire de
888
					N'oubliez pas qu'il est nécessaire de
896
					<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>
897
					au préalable, si ce n'est pas déjà fait.
890
					au préalable, si ce n'est pas déjà fait.
898
				</p>
891
				</p>
899
			</div>
892
			</div>
900
			<div id="tpl-transmission-ko" style="display:none;">
893
			<div id="tpl-transmission-ko" style="display:none;">
901
				<p class="msg">
894
				<p class="msg">
902
					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 />
903
					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
904
					et transmettre les suivantes.<br />
897
					et transmettre les suivantes.<br />
905
					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 />
906
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
899
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
907
					<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']); ?>"
908
								  target="_blank"
901
								  target="_blank"
909
								  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;">
910
								  le formulaire de signalement d'erreurs</a>.
903
								  le formulaire de signalement d'erreurs</a>.
911
				</p>
904
				</p>
912
			</div>
905
			</div>
913
 
906
 
914
			<!-- Fenêtres modales -->
907
			<!-- Fenêtres modales -->
915
			<div id="chargement" class="modal-fenetre" style="display:none;">
908
			<div id="chargement" class="modal-fenetre" style="display:none;">
916
				<div id="chargement-centrage" class="modal-contenu">
909
				<div id="chargement-centrage" class="modal-contenu">
917
					<div class="progress">
910
					<div class="progress">
918
						<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="">
919
							<span class="sr-only">0/10 observations transmises</span>
912
							<span class="sr-only">0/10 observations transmises</span>
920
						</div>
913
						</div>
921
					</div>
914
					</div>
922
 
915
 
923
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
916
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
924
						Transfert des observations en cours...<br />
917
						Transfert des observations en cours...<br />
925
						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
926
						d'observations à transférer.
919
						d'observations à transférer.
927
					</p>
920
					</p>
928
				</div>
921
				</div>
929
			</div>
922
			</div>
930
 
923
 
931
			<div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
924
			<div id="projet-description" class="modal fade" tabindex="-1" role="dialog"
932
				 aria-labelledby="projet-description-titre" aria-hidden="true">
925
				 aria-labelledby="projet-description-titre" aria-hidden="true">
933
				<div class="modal-dialog">
926
				<div class="modal-dialog">
934
					<div class="modal-content">
927
					<div class="modal-content">
935
						<div class="modal-header">
928
						<div class="modal-header">
936
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
929
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
937
								<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>
938
							</button>
931
							</button>
939
							<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>
940
						</div>
933
						</div>
941
						<div class="modal-body">
934
						<div class="modal-body">
942
							<div class="dsc-imgs">
935
							<div class="dsc-imgs">
943
								<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"/>
944
							</div>
937
							</div>
945
							<div class="dsc-infos text-justify">
938
							<div class="dsc-infos text-justify">
946
								<h2>Qu'est-ce qu'un arbre têtard&nbsp;?</h2>
939
								<h2>Qu'est-ce qu'un arbre têtard&nbsp;?</h2>
947
								<p>
940
								<p>
948
									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
949
									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 »
950
									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
951
									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
952
									caractéristique à ces arbres.<br />
945
									caractéristique à ces arbres.<br />
953
									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
954
									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.
955
								</p>
948
								</p>
956
 
949
 
957
								<h2>Patrimoine naturel</h2>
950
								<h2>Patrimoine naturel</h2>
958
								<p>
951
								<p>
959
									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
960
									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
961
									<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
962
									que ces cavités procurent.<br/>
955
									que ces cavités procurent.<br/>
963
									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
964
									<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
965
									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.
966
								</p>
959
								</p>
967
 
960
 
968
								<h2>Patrimoine culturel</h2>
961
								<h2>Patrimoine culturel</h2>
969
								<p>
962
								<p>
970
									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
971
									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>
972
									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,...),
973
									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
974
									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
975
									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 />
976
									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>
977
									qui participent à l'identité culturelle de nos territoires.
970
									qui participent à l'identité culturelle de nos territoires.
978
								</p>
971
								</p>
979
								<p class="bg-success text-center">
972
								<p class="bg-success text-center">
980
									<strong>
973
									<strong>
981
										Afin d’œuvrer à leur conservation, nous avons besoin de vous :
974
										Afin d’œuvrer à leur conservation, nous avons besoin de vous :
982
										transmettez-nous vos observations.
975
										transmettez-nous vos observations.
983
									</strong>
976
									</strong>
984
								</p>
977
								</p>
985
							</div>
978
							</div>
986
						</div>
979
						</div>
987
						<div class="modal-footer dsc-clean">
980
						<div class="modal-footer dsc-clean">
988
							<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>
989
						</div>
982
						</div>
990
					</div>
983
					</div>
991
				</div>
984
				</div>
992
			</div>
985
			</div>
993
 
986
 
994
			<div id="taille-description" class="modal fade" tabindex="-1" role="dialog"
987
			<div id="taille-description" class="modal fade" tabindex="-1" role="dialog"
995
				 aria-labelledby="taille-description-titre" aria-hidden="true">
988
				 aria-labelledby="taille-description-titre" aria-hidden="true">
996
				<div class="modal-dialog">
989
				<div class="modal-dialog">
997
					<div class="modal-content">
990
					<div class="modal-content">
998
						<div class="modal-header">
991
						<div class="modal-header">
999
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
992
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
1000
								<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>
1001
							</button>
994
							</button>
1002
							<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>
1003
						</div>
996
						</div>
1004
						<div class="modal-body text-center">
997
						<div class="modal-body text-center">
1005
							<div class="taille-img thumbnail">
998
							<div class="taille-img thumbnail">
1006
								<div class="taille-img-alignement">
999
								<div class="taille-img-alignement">
1007
									<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"
1008
										 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"/>
1009
									<div class="caption"><h3>En têtard ou trogne</h3></div>
1002
									<div class="caption"><h3>En têtard ou trogne</h3></div>
1010
								</div>
1003
								</div>
1011
							</div>
1004
							</div>
1012
							<div class="taille-img thumbnail">
1005
							<div class="taille-img thumbnail">
1013
								<div class="taille-img-alignement">
1006
								<div class="taille-img-alignement">
1014
									<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"
1015
										 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"/>
1016
									<div class="caption"><h3>En tête de chat</h3></div>
1009
									<div class="caption"><h3>En tête de chat</h3></div>
1017
								</div>
1010
								</div>
1018
							</div>
1011
							</div>
1019
							<div class="taille-img thumbnail">
1012
							<div class="taille-img thumbnail">
1020
								<div class="taille-img-alignement">
1013
								<div class="taille-img-alignement">
1021
									<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"
1022
										 alt="Illustration d'un arbre tétârd taillé en ragosse"/>
1015
										 alt="Illustration d'un arbre tétârd taillé en ragosse"/>
1023
									<div class="caption"><h3>En ragosse</h3></div>
1016
									<div class="caption"><h3>En ragosse</h3></div>
1024
								</div>
1017
								</div>
1025
							</div>
1018
							</div>
1026
						</div>
1019
						</div>
1027
						<div class="modal-footer dsc-clean">
1020
						<div class="modal-footer dsc-clean">
1028
							<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>
1029
						</div>
1022
						</div>
1030
					</div>
1023
					</div>
1031
				</div>
1024
				</div>
1032
			</div>
1025
			</div>
1033
		</div>
1026
		</div>
1034
	</body>
1027
	</body>
1035
</html>
1028
</html>