:root {
	--color-brand-blue: #264778;
	--color-navy: #1a2f52;
	--color-cyan: #00b9e1;
	--color-pale-blue: #adbdce;
}

/*==============================================================
   Ecrans larges (>= 866px) - anciennement fiche_plante_large.css
   ==============================================================*/
@media (min-width: 866px) {
/****************************/
         /*body*/
/****************************/

body
{
   width: 98%;
   max-width: 51rem;
   height: auto;
   margin: auto; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
   background-color: var(--color-brand-blue);
}


/********************************/
       /*image en tête*/
/********************************/


#sous_en_tete_avec_image
{
   width: 100%;
   height: 4.375rem;
   background-color: var(--color-brand-blue);
   padding: 0;
   margin: 0;
	border-bottom: 1px  solid white;
}

#sous_en_tete_avec_image img 
{
   width: 100%;
   height: 4.8125rem;
   position: relative;
   left: 0;
}

/********************************/
       /*NEW sous en tête*/
/********************************/

.menu_navigation {
	width: 100%;
	height: 3.4375rem;
	background-color: white;
	border-top: 1px  solid white;
	border-bottom: 1px  solid white;
	padding: 0;
	margin: 0.3125rem 0 0 0;
	border-top: 1px  solid white;
	border-bottom: 1px  solid white;
}

.menu_toggle_checkbox,
.menu_toggle_label {
	display: none;
}

.menu_navigation ul {
	width: auto;
	margin: 0;
	padding: 0 0 0 0.375rem;
}

.menu_navigation li {
   	width: 8%;
	height: 2.8125rem;
	margin: 0.3125rem 0 0 0.25rem;
	padding: 0 0 0 0;
	list-style: none;
	display: inline-block;
	border-radius: 0.3125rem;
}

.menu_navigation a {
   	display: block; 
	width: auto;
	height: 1.875rem;
	padding: 0.625rem 0 0 0;
	text-decoration: none;
	color: var(--color-brand-blue);
	font-family: Arial, Verdana, serif;
	font-size: 0.9em;
	text-align: center;
	font-weight: bold;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.menu_navigation a:hover {
	color: white;
	background: var(--color-pale-blue);
	border-radius: 0.3125rem;
}

.menu_navigation .bouton_fixe a {
   	display: block; 
	width: auto;
	height: 1.875rem;
	padding: 0.625rem 0 0 0;
	background-color: var(--color-pale-blue);
	color: #fff;
	font-family: Arial, Verdana, serif;
	font-size: 0.9em;
	text-align: center;
	font-weight: bold;
	border-radius: 0.3125rem;
}

.menu_navigation .bouton_fixe a:hover {
	background-color: var(--color-brand-blue);
}

.menu_navigation .nombre_fiches_css_large {
	position: relative; 
	left: 8rem;
	top: -1.5625rem;
	height: 1.5625rem;
	width: 1.5625rem;
	background: url(photo/rond_menu.png);
	background-repeat: no-repeat;
	text-align: center; 
	display: table-cell;
	vertical-align: middle;
	color: white;
	font-family: Arial, Verdana, serif;
	font-weight: bold;
	font-size: 0.8em;
}

.menu_navigation .nombre_article_css_large {
	position: relative; 
	left: 38.3125rem;
	top: -1.5625rem;
	height: 1.5625rem;
	width: 1.5625rem;
	background: url(photo/rond_menu.png);
	background-repeat: no-repeat;
	text-align: center; 
	display: table-cell;
	vertical-align: middle;
	color: white;
	font-family: Arial, Verdana, serif;
	font-weight: bold;
	font-size: 0.8em;
}

.menu_navigation .nombre_video_css_large {
	position: relative; 
	left: 41.25rem;
	top: -1.5625rem;
	height: 1.5625rem;
	width: 1.5625rem;
	background: url(photo/rond_menu.png);
	background-repeat: no-repeat;
	text-align: center; 
	display: table-cell;
	vertical-align: middle;
	color: white;
	font-family: Arial, Verdana, serif;
	font-weight: bold;
	font-size: 0.8em;
}

.menu_navigation .nombre_fiches_css_small {
	display: none;
}

.menu_navigation .nombre_article_css_small {
	display: none;
}

.menu_navigation .nombre_video_css_small {
	display: none;
}

/****************************************/
     /*menu déroulant dans recherche*/
/****************************************/

#menu_deroulant_background
{
	width: 100%;
	height: 2.9375rem;
	background-color: white;	
}

#menu_deroulant
{
	margin: 0 0 0 0.625rem;
	padding: auto; 
	width: 97%;
	height: 2.9375rem;
	background-color: var(--color-pale-blue);	
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
	border-radius: 0.3125rem;
}

#menu_deroulant .recherche 
{
	width: 40%;
	height: 1.25rem;
	margin: 0.9375rem 0 0 0.625rem;
	padding: 0 0 0 0;
	display: inline-block;
	border-radius: 0.3125rem;
}

#menu_deroulant .recherche  a
{
   	display: block; 
	width: auto;
	height: 1.25rem;
	text-decoration: none;
	background-color: #FFFFFF;
	color: var(--color-brand-blue);
	font-family: Arial, Verdana, serif;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#menu_deroulant .recherche a:hover
{
	color: white;
	background-color: var(--color-brand-blue);
	border-radius: 0.3125rem;
}


#menu_deroulant .imprimer
{
    float: right;
	background: url(photo/imprimer.png) no-repeat 0px -18px;
	display: block;
   	width: 3%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0.3125rem;
	text-decoration: none;
}

#menu_deroulant .imprimer:hover
{ 
    background: url(photo/imprimer.png) no-repeat 0px 0px;
} 

#menu_deroulant .youtube
{
    float: right;
	background: url(photo/youtube.png) no-repeat 0px -18px;
	display: block;
   	width: 3%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0.3125rem;
	text-decoration: none;
}

#menu_deroulant .youtube:hover
{ 
    background: url(photo/youtube.png) no-repeat 0px 0px;
} 

#menu_deroulant .commentaire
{
    float: right;
	background: url(photo/commentaire.png) no-repeat 0px -18px;
	display: block;
   	width: 3%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0.3125rem;
	text-decoration: none;
}

#menu_deroulant .commentaire:hover
{ 
    background: url(photo/commentaire.png) no-repeat 0px 0px;
} 

#menu_deroulant .plus_de_photos
{
    float: right;
	background: url(photo/plus_de_photos.png) no-repeat 0px -18px;
	display: block;
   	width: 3%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0.3125rem;
	text-decoration: none;
}

#menu_deroulant .plus_de_photos:hover
{ 
    background: url(photo/plus_de_photos.png) no-repeat 0px 0px;
} 

#menu_deroulant .video
{
    float: right;
	background: url(photo/video.png) no-repeat 0px -18px;
	display: block;
   	width: 3%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0.3125rem;
	text-decoration: none;
}

#menu_deroulant .video:hover
{ 
    background: url(photo/video.png) no-repeat 0px 0px;
} 

#menu_deroulant form
{
	display: block;
	padding: 0.9375rem 0 0 1.5625rem;
}

select 
{ 
	background: var(--color-pale-blue);
	border-color: var(--color-pale-blue);
	color: var(--color-brand-blue);
}

/* champ de recherche (auto-complétion via <datalist>) : mêmes couleurs
   que les select du site, pour rester cohérent visuellement */
#recherche_texte
{
	width: 60%;
	background: var(--color-pale-blue);
	border-color: var(--color-pale-blue);
	color: var(--color-brand-blue);
}

optgroup 
{ 
	display: block;
	padding: 0.625rem 0 0.625rem 0;
}

#menu_deroulant p
{
	color: var(--color-brand-blue);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
}


/********************************/
       /*TEST TEST TEST */
/********************************/

 
.image_hamburger_plus
{
	display: none;
}

.image_hamburger_plus:hover
{ 
	display: none;
} 

.image_hamburger_moins
{
	display: none;
}
.image_hamburger_moins:hover
{ 
	display: none;
} 

#hamburger 
{
	width: 100%;
    height: 0;
    overflow: hidden;
	transition: height 1.5s;
} 

#hamburger:target 
{
    height: 31.25rem;
	background-color: white;
}

#hamburger .bouton 
{
   	width: 97%;
	height: 2.0625rem;
	display: block;
	margin: 0.3125rem 0 0.625rem 0.625rem;
	padding: 0.3125rem 0 0 0;
	background-color: var(--color-pale-blue);	
	text-decoration: none;
	font-family: Arial, Verdana, serif;
	color: var(--color-brand-blue);
	font-size: 0.7em;
	text-align: center;
	font-weight: bold;
}

#hamburger .bouton:hover 
{
background-color: var(--color-brand-blue);	
	color: white;
}

#hamburger .bouton_fixe
{
   	width: 97%;
	height: 2.0625rem;
	display: block;
	margin: 0.3125rem 0 0.625rem 0.625rem;
	padding: 0.3125rem 0 0 0;
	background-color: var(--color-brand-blue);	
	text-decoration: none;
	font-family: Arial, Verdana, serif;
	color: white;
	font-size: 0.7em;
	text-align: center;
	font-weight: bold;
}

#hamburger .bouton_fixe:hover 
{
background-color: var(--color-pale-blue);	
	color: white;
}

/********************************/
       /*FIN TEST TEST TEST */
/********************************/

/****************************/
     /*menu de gauche*/
/****************************/

#menu_gauche
{
   float: left; /* Le menu flottera à gauche */
   width: 0%; /* Très important: donner une taille au menu *//* normalement 80px en width si corps fait 80px en left*/
   background-color: #67ff6a;
   border: 0px  solid white;
}


/****************************/
      /*menu de droite*/
/****************************/

#menu_droite
{
   float: right; /* Le menu flottera à gauche */
   width: 0%; /* Très important: donner une taille au menu */
   background-color: #67ff6a;
   border: 0px  solid white;
}

/****************************/
          /*corps*/
/****************************/

#corps
{
	width: 100%;
	height: auto;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

h1
{
	width: 38%;
	display: block;
	margin: 0.9375rem 0 0 0.3125rem;
	padding: 0 0.125rem 0 0; /*leave this value alone*/
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.95em;
}

h1:first-letter
{
	text-transform: uppercase;
}

.mention_legale
{
	width: 100%;
	display: block;
	margin: 1.875rem 0 0 0;
	padding: 0 0 0 0; /*leave this value alone*/
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.95em;
}

.mention_legale:first-letter
{
	text-transform: uppercase;
}

.plus_de_photo
{
	display: block;
	margin: 1.25rem 16.25rem 3.125rem 10.9375rem;
	width: 45%;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.95em;
}
 
.plus_de_photo:first-letter
{
	text-transform: uppercase;
}

h2
{
	margin: 0.625rem 0 0.625rem 0.625rem;
	padding-bottom: 0.3125rem;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.9em;
}

.nom_commun
{
	width: 38%;
	margin: 0.625rem 0 0.625rem 0.3125rem;
	padding-bottom: 0.3125rem;
	color: red;
	text-align: center;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.8em;
}

#video_h2
{
	margin: 0.625rem 0 0.625rem 0.625rem;
	padding-bottom: 0.3125rem;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.9em;
}

.fiches_creees_dans_fiche_plantes
{
	margin: 0.625rem 0 0.625rem 0;
	padding-bottom: 0.3125rem;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.8em;
}

.titre_jaune  /*titre des famille, particularités...*/
{
	color: #a3a222;
	font-weight: bold;
}

#corps .accueil
{
	display: block;
	margin: 0 0 0 1.875rem;
}

#corps p
{
	margin: 0;
	margin-top: 0.625rem;
	padding-left: 0.5rem; /*leave this value alone*/
	padding-right: 0.3125rem; /*leave this value alone*/
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}


#corps .video
{
	margin: 0;
	margin-top: 3.125rem;
	padding-left: 0.3125rem; /*leave this value alone*/
	padding-right: 0.9375rem; /*leave this value alone*/
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}


.majuscule a:first-letter
{
	text-transform: uppercase;
}


/* dans fiche plante */


#plante_precedente_plante_suivante
{
	width: 80%;
	height: 1.25rem;
	display: block;
	margin: 1.25rem 0 0 3.75rem;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-weight: bold;
}

.a_gauche
{
    display: block;
	width: 20%;
	color: var(--color-cyan);
	margin: 0;
	float: left;
	font-size: 0.7em;
	text-decoration: none;
}

.a_gauche:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	font-size: 0.7em;
	text-decoration: none;
}

.a_gauche:active /* Quand le visiteur clique sur le lien */
{
    color: green;
	text-decoration: none;
}

.a_droite
{
    display: block;
	width: 20%;
	color: var(--color-cyan);
	margin: 0;
	float: right;
	font-size: 0.7em;
	text-decoration: none;
}

.a_droite:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	font-size: 0.7em;
	text-decoration: none;
}

.a_droite:active /* Quand le visiteur clique sur le lien */
{
    color: green;
	text-decoration: none;
}

#plusdephoto_precedent_plusdephoto_suivant
{
	width: 80%;
	height: 1.25rem;
	display: block;
	margin: 0.625rem 0 0 3.75rem;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-weight: bold;
}

#sentier_precedent_sentier_suivant
{
	width: 80%;
	height: 1.25rem;
	display: block;
	margin: 0.625rem 0 0 3.75rem;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-weight: bold;
}

/****************************/
/* courte information */
/****************************/


#courte_info
 {
	display: block;
	width: 38%;
	height: auto;
	margin: 1.25rem 0 0.9375rem 0.625rem;
	padding: 0 0 0 0; /*leave this value alone*/
}

#corps  .courte_information
 {
	margin: 0 0 0 0;
	padding: 0.25rem 0.25rem 0.25rem 0.25rem; /*leave this value alone*/
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
	color: var(--color-navy);
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}


/* dans fiche sentier */

#sentier_de
{
	width: 70%;
	display: block;
	margin: 0.9375rem 0 0.9375rem 8.75rem;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.95em;
}

.sentier_a_gauche
{
    display: block;
	width: 4%;
	color: var(--color-cyan);
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.7em;
	float: left;
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

.sentier_a_gauche:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	margin: 0 0 0 3.125rem;
	font-size: 0.7em;
	text-decoration: none;
	border-bottom: dotted 1px red; 
}

.sentier_a_gauche:active /* Quand le visiteur clique sur le lien */
{
    color: green;
	margin: 0 0 0 3.125rem;
	text-decoration: none;
	border-bottom: dotted 1px green; 
}

.sentier_a_droite
{
    display: block;
	width: 4%;
	color: var(--color-cyan);
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.7em;
	float: right;
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

.sentier_a_droite:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	margin: 0 3.125rem 0 0;
	font-size: 0.7em;
	text-decoration: none;
	border-bottom: dotted 1px red; 
}

.sentier_a_droite:active /* Quand le visiteur clique sur le lien */
{
    color: green;
	margin: 0 3.125rem 0 0;
	text-decoration: none;
	border-bottom: dotted 1px green; 
}



.lien
{
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 1em;
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

.lien:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	text-decoration: none;
	border-bottom: dotted 1px red; 

}

.lien:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
	border-bottom: dotted 1px green; 
}


.ancre_vers_carte_google_de_sentier_php
{
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

.ancre_vers_carte_google_de_sentier_php:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	text-decoration: none;
	border-bottom: dotted 1px red; 
}

.ancre_vers_carte_google_de_sentier_php:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
	border-bottom: dotted 1px green; 
}


p .lien_famille
{
	display: block;
	float: left;
	width: 80%;
	height: auto;
	margin: 0 0 0.0625rem 1.5625rem;
	padding: 0 0 0 0;
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
   	text-decoration: none;
}

p .lien_famille:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
   	text-decoration: none;
	border-bottom: dotted 1px red; 
}

p .lien_famille:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
	border-bottom: dotted 1px green; 
}

p .lien_famille:visited /* Quand le visiteur clique sur le lien */
{
    color: black;
   	text-decoration: none;
	border-bottom: dotted 1px black; 
}

/****************************************************/
/*      	 vidéo dans les fiches plantes   	    */
/****************************************************/

#ancre_video_fiche_plante
{
   float: left; /* Le menu flottera à gauche */
   margin: 0.3125rem 0.9375rem 0.625rem 0.3125rem;
}

.centrer
{
	text-align: center;
}

.source
{
	margin: 0.625rem 0.9375rem 0 0;
	padding: 0 0 6.25rem 0;
	color: #a3a222;
	text-align: right; /* texte non justifié si justifier, rajouter justify */
}

.patienter
{
	margin: 0 0 1.25rem 0;
	padding: 0 0 0 0;
	color: none;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
}


/********************************************************/
    /*diaporama plus de photo fiche-plante dans le corps*/
/********************************************************/

#diaporama
{
	position: relative; /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	margin: -37.5rem 2.5rem 0 0; 
	height: 36.25rem;

}

#dia 
{
	float: right; /* Le menu flottera à gauche */
	width: 8%;
	margin: 3.125rem 2.5rem 0 0; 
	padding: 0 0 0 0; /*leave this value alone*/
	border: 2px solid red;
}

#dia .premier 
{
	display: block;
	float: left;
	margin: 0.3125rem 0 0.5625rem 0.9375rem;
	width: 2.6875rem; /* empêche le clignotement de la grande image */
	height: 2.6875rem; /* empêche le clignotement de la grande image */
   background: url('photo/doigt.png') no-repeat;
}

#dia .premier img 
{
	position: absolute; /* position de la grande photo au niveau où se trouve les petites images suivant la position qui est donné ci dessous par les margin  */
	left: 0;
	top: 0;
	margin-left: 10.9375rem;
	margin-top: 1.875rem;
	width: 23.4375rem; /* taille de la photo ouverte  */
	height: 31.25rem;
	border: 0px solid black;
}

#dia .premier:hover 
{
	float: left;
	margin: 0.3125rem 0 0.5625rem 0.9375rem;
	width: 2.6875rem; /* empêche le clignotement de la grande image */
	height: 2.6875rem; /* empêche le clignotement de la grande image */
}

/* grande image */

#dia .premier:hover img 
{
	position: absolute; /* position de la grande photo au niveau où se trouve les petites images suivant la position qui est donné ci dessous par les margin  */
	left: 0;
	top: 0;
	margin-left: 10.9375rem;
	margin-top: 1.875rem;
	width: 23.4375rem; /* taille de la photo ouverte  */
	height: 31.25rem;
	border: 0px solid black;
}

#dia .suivant 
{
	display: block;
	float: left;
	margin: 0.3125rem 0 0.5625rem 0.9375rem;
	width: 2.6875rem; /* empêche le clignotement de la grande image */
	height: 2.6875rem; /* empêche le clignotement de la grande image */
}

#dia .suivant img 
{
	width: 2.6875rem;
	height: 2.6875rem;
	border: 0;
}

#dia .suivant:hover 
{
	float: left;
	margin: 0.3125rem 0 0.5625rem 0.9375rem;
	width: 2.6875rem; /* empêche le clignotement de la grande image */
	height: 2.6875rem; /* empêche le clignotement de la grande image */
}

/* grande image */

#dia .suivant:hover img 
{
	position: absolute; /* position de la grande photo au niveau où se trouve les petites images suivant la position qui est donné ci dessous par les margin  */
	left: 0;
	top: 0;
	margin-left: 10.9375rem;
	margin-top: 1.875rem;
	width: 23.4375rem; /* taille de la photo ouverte  */
	height: 31.25rem;
	border: 0px solid black;
}

/****************************/
    /*image dans le corps*/
/****************************/

.float_droite
{
	margin: 0 0 0.3125rem 0.625rem; 
	float: right; 
}


.float_gauche
{
	margin: 0 0.625rem 3.125rem 0; 
	float: left; 
}

#image
{
	margin: 0.625rem 0 0.3125rem 0.4375rem; 
	padding: 0 0 0 0; /*leave this value alone*/
	float: right; 
	width: 60%;
	height: 36.25rem; /*au lieu de 555px avec image qui s'agrandissent*/
	/*border: ridge 8px #dfffba;*/
}

#image img
{
	display: block;
	padding: 0 0.125rem 0 0; /*leave this value alone*/
	float: right; /* Le menu flottera à gauche */
	margin: 0 0 0.5625rem 0.3125rem;
}

#image .calendrier_large
{
	display: block;
	padding: 0 0 0 0; /*leave this value alone*/
	float: right; /* Le menu flottera à gauche */
	margin: 0 0 0 0;
}

#image .calendrier_small
{
	display: none;
}


/****************************************/
  /*diaporama des différentes familles*/
/****************************************/


 .a_block_famille {
	display: block;
	float: left;
	width: 7.1875rem;
	height: 15rem;
	margin: 0 0 1.25rem 0.625rem;
	padding: 0.3125rem 0 0 0.3125rem;
	border: 2px solid #B9B9B9;
	border-radius: 0.4375rem;
	text-decoration: none;
}

.a_block_famille:hover {
	border: 2px solid #B9B9B9;
	border-radius: 0.4375rem;
	text-decoration: none;
}

.a_block_famille img {
	width: 6.875rem;
	height: 9.875rem;
}

.text_nom_famille{
	display: block;
	background-color: #638dcb;
	width: 6.875rem;
	height: 1.875rem;
	margin: 0 0 0.3125rem 0;
	padding: 0.625rem 0 0 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.70em;
	Font-Weight: Bold;
	color: white;
	border-radius: 0.3125rem;
}

.text_nom_genre_espece_dans_famille {
	display: block;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}


/****************************************/
    /*diaporama photo alphabet*/
/****************************************/


#gallery {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	padding: 0.9375rem 0 0 0;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}
#gallery::after {
	content: "";
	display: table;
	clear: both;
}

#thumbs a {
	display: block;
	float: left;
	margin: 0 0 2.8125rem 1.375rem;
	width: 6.875rem;
	height: 9.875rem;
	text-decoration: none;
}
#thumbs a img {
	width: 6.875rem;
	height: 9.875rem;
	border: #ffff00 0.5px ridge;
}
#thumbs a:hover {
	border: none;
}

#thumbs .text_image {
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#gallery .texte
{
	display: block;
	float: left;
	margin: 0 0 2.5rem 0.9375rem;
	padding: 2.8125rem 0 0 0;
	width: 6.875rem;
	height: 7.0625rem;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
	border: #ffff00 0.5px ridge;
	background-color: var(--color-pale-blue);
}

#gallery .texte:hover
{
	border: #ffff00 0.5px ridge;
}

/***********************************************/
    /*diaporama photo alphabet dans accueil*/
/***********************************************/

#fiche_cree_fiche_modifiee{
	display: block;
	width: 100%;
	height: 33.125rem;
	padding-top: 0.625rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

#gallery_accueil {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: 12.5rem;
	padding-top: 0.625rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

#gallery_consulter_aussi_fiche_suivante /*gallery dans plus de photos de*/
{
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: 12.5rem;
	padding-top: 0.625rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

#gallery_fiche_plante {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: 12.5rem;
	padding-top: 0.625rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

#thumbs_accueil a {
	display: block;
	float: left;
	margin: 0 0 2.8125rem 1.1875rem;
	width: 6.875rem;
	height: 9.875rem;
	text-decoration: none;
}
#thumbs_accueil a img {
	width: 6.875rem;
	height: 9.875rem;
	border: #ffff00 0.5px ridge;
}
#thumbs_accueil a:hover {
	border: none;
}

#thumbs_accueil .text_image {
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}


/***************************************************/
    /*diaporama photo plante et texte dans sentier */
/***************************************************/
#trois_photo_sentier
{
	display: block;
	width: 100%;
	height: 12.5rem;
}

#trois_photo_sentier .image_chemin_dans_sentier
{
	width: 30%;
	float: left;
	margin: 0.1875rem 0 0.625rem 1.25rem;
}

#sentier_de_description
{
	display: block;
	width: 90%;
	margin: 0 0 0 1.25rem;
}

#gallery_plante_sentier {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	padding-top: 1.875rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;

}
#gallery_plante_sentier::after {
	content: "";
	display: table;
	clear: both;
}

#thumbs_presentation_fleur_sentier  {
	float: left;
	margin: 0 0 0.625rem 0.875rem;
	width: 31%;
	height: 11.875rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;

}

#thumbs_presentation_fleur_sentier a {
	display: block;
	float: left;
	margin: 0 0 2.8125rem 0.3125rem;
	padding: 0.9375rem 0 0 0;
	width: 6.875rem;
	height: 9.875rem;
	text-decoration: none;
}
#thumbs_presentation_fleur_sentier a img {
	width: 6.875rem;
	height: 9.875rem;
	border: #ffff00 0.5px ridge;
}
#thumbs_presentation_fleur_sentier a:hover {
	border: none;
}

#thumbs_presentation_fleur_sentier .lien_image {
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#thumbs_presentation_fleur_sentier .nom_plante {
	display: block;
	margin: 1.25rem 0.3125rem 0.125rem 7.5rem;
	width: 6.875rem;
	height: 1.25rem;
	font-weight: bold;
	color: red;
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_presentation_fleur_sentier .nom_plante:first-letter{
	text-transform: uppercase;
}

#thumbs_presentation_fleur_sentier .text {
	display: block;
	margin: 1.875rem 0.3125rem 0.625rem 7.5rem;
	width: 6.875rem;
	height: 6.875rem;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_presentation_fleur_sentier .text:first-letter{
	text-transform: uppercase;
}


/***************************************************/
			/*carte google des sentiers  */
/***************************************************/

#carte_google_des_sentiers {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 90%;
	height: auto;
	padding-top: 0.3125rem;
    margin: 0 0 0 1.875rem; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    background-color: white;
}


/***************************************************/
    /*diaporama photo et texte dans sentier.php */
/***************************************************/

.image_sentier_gauche
{
	display: block;
	float: left;
	margin: 0.1875rem 0.375rem 0.625rem 0.1875rem;
}

.image_sentier_droite
{
	display: block;
	float: right;
	margin: 0.1875rem 0.1875rem 0.625rem 0.375rem;
}


#gallery_sentier {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: auto;
	padding-top: 0.3125rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    background-color: white;
}

#thumbs_sentier  {
	width: 90%;
	height: 10.3125rem;
	margin: 0 0 0.625rem 2.5rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;
}

#thumbs_sentier .image_sentier_gauche {
	float: left;
	display: block;
	margin: 0.1875rem 0 0 0.625rem;
	padding: 0 0 0 0;
	width: 13.125rem;
	height: 9.875rem;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}
#thumbs_sentier .image_sentier_gauche img {
	width: 13.125rem;
	height: 9.875rem;
	border: #ffff00 0.5px ridge;
}
#thumbs_sentier .image_sentier_gauche:hover {
	margin: 0.1875rem 0 0 0.625rem;
	border: none;
}

#thumbs_sentier .nom_sentier {
	display: block;
	margin: 0.625rem 0 0.125rem 15.625rem;
	width: 50%;
	height: 1.25rem;
	font-weight: bold;
	color: red;
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_sentier .nom_sentier:first-letter{
	text-transform: uppercase;
}

#thumbs_sentier .text_sentier {
	display: block;
	margin: 1.25rem 0.3125rem 0.625rem 15.625rem;
	width: 55%;
	height: 5rem;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */

}

#thumbs_sentier .text_sentier:first-letter{
	text-transform: uppercase;
}

#thumbs_sentier .ancre_vers_carte_google
{
	display: block;
	margin: -0.3125rem 0 0.1875rem 15.75rem;
	width: 55%;
	height: 4.0625rem;
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-decoration: none;
}

#thumbs_sentier .ancre_vers_carte_google:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	text-decoration: none;

}

#thumbs_sentier .ancre_vers_carte_google:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
}

/***************************************************/
/*               article.php                       */
/***************************************************/

#gallery_article {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: auto;
	padding-top: 0.3125rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    background-color: white;
}


#thumbs_article  {
	margin: 0 0 0.625rem 0.625rem;
	width: 94%;
	height: 13.125rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;
}

#image_article {
	float: left;
	display: block;
	width: 35%;
	margin: 0.3125rem 0 0 0.625rem;
	text-decoration: none;
	color: var(--color-navy);
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#image_article img {
	width: 80%;
}

#image_article a:hover {
	border: none;
}

#text_ensemble_article {
	display: block;
	float: right;
	height: 9.375rem;
	width: 60%;
	color: var(--color-navy);
}


#text_ensemble_article .text_date_article {
	float: right;
	height: 0.9375rem;
	width: 90%;
	text-align: right; 
}

#text_ensemble_article .titre_article {
	display: block;
	float: right;
	width: 90%;
	height: 1.25rem;
	font-weight: bold;
	color: red;
	text-align: justify; 
}

#text_ensemble_article .titre_article:first-letter{
	text-transform: uppercase;
}

#text_ensemble_article .paragraphe_1 {
	display: block;
	float: right;
	width: 90%;
	height: 6.25rem;
	text-decoration: none;
	color: var(--color-navy);
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#text_ensemble_article .paragraphe_1:first-letter{
	text-transform: uppercase;
}


/*****************************************************/
/*                  article_sur.php                  */
/*****************************************************/

#article_sur {
	width: 100%;
	padding-top: 0.3125rem;
    margin: 0 auto 0 auto; 
    background-color: white;
	color: var(--color-navy);
}

#article_sur_paragraphe {
	width: 90%;
	min-height: 350px; 
	margin: 0 auto 0.625rem auto;
	padding: 1.25rem 1.25rem 1.25rem 1.25rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;
}

#image_gauche_article_sur_paragraphe {
	float: left;
	width: 50%;
	margin: 0 1.25rem 1.25rem 0;
	text-decoration: none;
}

#article_sur_paragraphe .text_date_article {
	text-align: right; 
}

#article_sur_paragraphe .text_le_titre_de_l_article {
	font-weight: bold;
	color: red;
	text-align: right; 
}

#article_sur_paragraphe .text_le_titre_de_l_article:first-letter{
	text-transform: uppercase;
}

#article_sur_paragraphe.text_paragraphe {
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#article_sur_paragraphe .text_paragraphe1:first-letter{
	text-transform: uppercase;
}

#image_droite_article_sur_paragraphe {
	float: right;
	width: 50%;
	margin: 0 0 1.25rem 1.25rem;
	text-decoration: none;
}

/***************************************************/
					/* minichat */
/***************************************************/

#barre_minichat_couleur_fond
{
	margin: 0 0 0 0.625rem;
	padding: 0 0 0 0; 
	width: 97%;
	height: 3.125rem;
	background-color: var(--color-pale-blue);	
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#barre_minichat
{
	width: 100%;
	height: 3.125rem;
	margin: 0 0 0 0.625rem;
	background: url(photo/photo_minichat.jpg);
	background-repeat: no-repeat;
	background-position: 0% 5%;
}

#barre_minichat .nombre_avis
{
	display: block; 
	width: 6%;
	height: 0.625rem;
	margin: 2.5rem 0 0 3rem;
	padding: 0.4375rem 0 0 0.625rem;
	color: white;
	font-family: Arial, Verdana, serif;
	font-weight: bold;
	font-size: 0.8em;
}

#barre_minichat .text_avis
{
	display: block; 
	width: 60%;
	height: 0.625rem;
	margin: -0.625rem 0 0 15.5rem;
	color: var(--color-brand-blue);
	font-family: Arial, Verdana, serif;
	font-weight: bold;
	font-size: 0.8em;
}

#formulaire_minichat {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 70%;
	height: auto;
    margin: 0.9375rem 0 0 6.25rem; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
	padding: 0.3125rem 0 0.3125rem 0.625rem;
	border: 1px var(--color-pale-blue) solid;
    background-color: #E7ECF1;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#formulaire_minichat .pseudo { 
	display: block; 
    margin: 0 0 0 0.625rem;
	width: 30%; 
}

#formulaire_minichat .message { 
	display: block; 
    margin: 0 0 0 0.625rem;
	width: 30%; 
	height: 2.5rem;
}

#formulaire_minichat .mottexte { 
	display: block; 
    margin: 0 0 0 0.625rem;
	width: 30%; 
}

#formulaire_minichat .email { 
	display: none; 
	width: 30%; 
}

#formulaire_minichat .envoyer { 
	display: block; 
	width: 30%;
	height: 9.375rem;
	float: right;
    margin: 0.9375rem 3.125rem 0 1.5625rem;
}


#gallery_minichat {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: auto;
}

#thumbs_minichat   {
    margin: 2.5rem 0 0 6.25rem; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
}

#thumbs_minichat span  {
	width: 81%;
	display: table;
	text-decoration: none;
	border: 1px var(--color-pale-blue) solid;
    background-color: #E7ECF1;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#thumbs_minichat span .text_pseudo {
	display: block;
	width: 50%;
	float: left;
	margin: 0.3125rem 0 0 0.625rem;
	color: var(--color-navy);
	font-weight: bold;
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_minichat span .text_pseudo_dans_accueil
{
	display: block;
	float: right;
	margin: 0.3125rem 0.625rem 0 0.625rem;
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

#thumbs_minichat span .text_pseudo_dans_accueil:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	text-decoration: none;
	border-bottom: dotted 1px red; 

}

#thumbs_minichat span .text_pseudo_dans_accueil:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
	border-bottom: dotted 1px green; 
}


#thumbs_minichat span .text_date_creation {
	display: block;
	margin: 0.3125rem 0 0 0.625rem;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_minichat span .text_date_creation_dans_accueil {
	display: block;
	float: left;
	width: 30%;
	margin: 0.3125rem 0 0 0.625rem;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}


#thumbs_minichat span .text_nom_plante_dans_accueil {
	display: block;
	margin: 0.3125rem 0 0 0.625rem;
	color: var(--color-navy);
	font-weight: bold;
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_minichat span .text_message {
	margin: 0.625rem 0.625rem 0.125rem 0.625rem;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

/***************************************************/
/*               vidéo.php                       */
/***************************************************/

#gallery_video {
	width: 100%;
	height: auto;
	padding-top: 0.3125rem;
    margin: 0; 
    background-color: white;
}


#thumbs_video  {
	margin: 0 0 0.625rem 0.625rem;
	width: 94%;
	height: 13.125rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;
}

#image_video {
	float: left;
	display: block;
	width: 35%;
	margin: 0.3125rem 0 0 0.625rem;
	text-decoration: none;
	color: var(--color-navy);
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#image_video img {
	width: 100%;
}

#image_video a:hover {
	border: none;
}

#text_ensemble_video {
	display: block;
	float: right;
	height: 9.375rem;
	width: 60%;
	color: var(--color-navy);
}


#text_ensemble_video .text_date_video {
	float: right;
	height: 0.9375rem;
	width: 90%;
	text-align: right; 
}

#text_ensemble_video .titre_video {
	display: block;
	float: right;
	width: 90%;
	height: 1.25rem;
	font-weight: bold;
	color: red;
	text-align: justify; 
}

#text_ensemble_video .titre_video:first-letter{
	text-transform: uppercase;
}

#text_ensemble_video .text_video {
	display: block;
	float: right;
	width: 90%;
	height: 6.25rem;
	text-decoration: none;
	color: var(--color-navy);
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#text_ensemble_video .text_video:first-letter{
	text-transform: uppercase;
}


/********************************/
       /*formulaire accès bdd*/
/********************************/
.formulaire label
{
   float: right; /* texte non justifié si justifier, rajouter justify */
   padding-top: 0.625rem; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
}

/****************************/
       /*pied de page*/
/****************************/

#pied_de_page
{
	width: 100%;
	height: 3.25rem;
	margin: 0 0 0.625rem 0;
	padding: auto; 
    border-top: 1px  solid white;
	border-bottom: 1px  solid var(--color-brand-blue);
    background: url('photo/coin_gauche.jpg') no-repeat;
}

#pied_de_page p
{
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	font-weight: bold;
	text-align: center; 
	color: var(--color-brand-blue);
}

#pied_de_page a
{
	color: var(--color-brand-blue);
	font-weight: bold;
	text-decoration: none;
}

#pied_de_page a:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
}

#pied_de_page a:active /* Quand le visiteur clique sur le lien */
{
   color: #008000;
}

/****************************/
       /*cache*/
/****************************/

#cache a{
	color: var(--color-brand-blue);
	font-size: 0.7em;
	text-align: left; /* texte non justifié si justifier, rajouter justify */
}

#cache a:hover /* Quand le visiteur pointe sur le lien */
{
	color: var(--color-brand-blue);
}

#cache a:active /* Quand le visiteur clique sur le lien */
{
   color: var(--color-brand-blue);
}

/*.imagetest img {
display: none;
position: absolute;
top: 19.375rem;
left: 6.25rem;
border: none;
}
.imagetest:hover  img 
{
display: inline;
} 
*/

}

/*==============================================================
   Ecrans etroits (<= 865px) - anciennement fiche_plante_small.css
   ==============================================================*/
@media (max-width: 865px) {
/****************************/
         /*body*/
/****************************/

body
{
   width: 100%;
   min-width: 24.375rem;
   height: auto;
   background-color: var(--color-brand-blue);
}


/********************************/
       /*image en tête*/
/********************************/


#sous_en_tete_avec_image
{
   width: 100%;
   height: 4.375rem;
   background-color: var(--color-brand-blue);
   padding: 0;
   margin: 0;
	border-bottom: 1px  solid white;
}

#sous_en_tete_avec_image img 
{
   width: 100%;
   height: 4.8125rem;
   position: relative;
   left: 0;
}

/********************************/
       /*NEW sous en tête*/
/********************************/

.menu_navigation {
	position: relative;
	width: 100%;
	height: 3.4375rem;
	border-top: 1px  solid white;
	border-bottom: 1px  solid white;
	background-color: #ffffff;
	padding: 0;
	margin: 0.3125rem 0 0 0;
	Z-Index: 2;
}	

.menu_navigation ul {
	width: 97%;
	margin: 0 0 0 0.625rem;
	padding: 0 0 0 0;
	background: #ffffff url(photo/signe_trait.png) no-repeat 7px 13px;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}	

.menu_navigation li {
	display: none; 
	margin: 0;
}	

.menu_navigation .bouton_fixe {
	display: block; 
}
.menu_navigation a {
	display: block;
	width: auto;
	height: 1.875rem;
	margin: 0 0 0 1.875rem;
	padding: 0.8125rem 0 0 0.625rem;
	color: var(--color-brand-blue);
	background-color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	color: var(--color-brand-blue);
	line-height: 100%;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.menu_navigation a:hover {
	color: white;
	background-color: var(--color-pale-blue);
	border-radius: 0.3125rem;
}


.menu_navigation .bouton_fixe a {
	background-color: var(--color-pale-blue);
	color: #fff;
	border-radius: 0.3125rem;
}

.menu_navigation .bouton_fixe a:hover {
	background-color: var(--color-brand-blue);
}

.menu_toggle_checkbox {
	display: none;
}
.menu_toggle_label {
	position: absolute;
	top: 0;
	left: 0.625rem;
	width: 97%;
	height: 3.4375rem;
	cursor: pointer;
	z-index: 3;
}

.menu_toggle_checkbox:checked ~ ul {
	background-image: none;
	position: relative;
	z-index: 4;
}
.menu_toggle_checkbox:checked ~ ul li {
	display: block;
	margin: 0 0 0.9375rem 0;
}

.menu_toggle_checkbox:checked ~ ul .bouton_fixe {
	background: #ffffff url(photo/signe_ok.png) no-repeat 7px 13px;
}

.menu_navigation .nombre_fiches_css_large {
	display: none;
}

.menu_navigation .nombre_article_css_large {
	display: none;
}

.menu_navigation .nombre_video_css_large {
	display: none;
}

.menu_navigation .nombre_fiches_css_small {
	display: block;
	float: left; 
	margin: 0 0.3125rem 0 0;
}

.menu_navigation .nombre_article_css_small {
	display: block;
	float: left; 
	margin: 0 0.3125rem 0 0;
}

.menu_navigation .nombre_video_css_small {
	display: block;
	float: left; 
	margin: 0 0.3125rem 0 0;
}



/****************************************/
     /*menu déroulant dans recherche*/
/****************************************/

#menu_deroulant_background
{
	width: 100%;
	height: 2.9375rem;
	background-color: white;	
}

#menu_deroulant
{
	margin: 0 0 0 0.625rem;
	padding: auto; 
	width: 97%;
	height: 2.9375rem;
	background-color: var(--color-pale-blue);	
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#menu_deroulant form 
{ 
	display: block;
	padding: 0.9375rem 0 0 1.5625rem;
}

select 
{ 
	width: 60%;
	background: var(--color-pale-blue);
	border-color: var(--color-pale-blue);
	color: var(--color-brand-blue);
}

/* champ de recherche (auto-complétion via <datalist>) : mêmes couleurs
   que les select du site, pour rester cohérent visuellement */
#recherche_texte
{
	width: 60%;
	background: var(--color-pale-blue);
	border-color: var(--color-pale-blue);
	color: var(--color-brand-blue);
}

optgroup 
{ 
	display: block;
	padding: 0.625rem 0 0.625rem 0;
}

#menu_deroulant p
{
	color: var(--color-brand-blue);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
}

#menu_deroulant a 
{
	display: block;
	float: left;
	margin: 0.625rem 0 0.625rem 9.375rem;
   	width: 8%;
	height: 4.375rem;
	text-decoration: none;
}

#menu_deroulant .recherche 
{
	width: 98%;
	height: 1.25rem;
	margin: 0.3125rem 0 0 -8.75rem;
	padding: 0 0 0 0;
	display: inline-block;
	border-radius: 0.3125rem;
}

#menu_deroulant .recherche  a
{
   	display: block; 
	width: auto;
	height: 1.25rem;
	text-decoration: none;
	background-color: #FFFFFF;
	color: var(--color-brand-blue);
	font-family: Arial, Verdana, serif;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#menu_deroulant .recherche a:hover
{
	color: white;
	background-color: var(--color-brand-blue);
	border-radius: 0.3125rem;
}


#menu_deroulant .imprimer
{
    float: right;
	background: url(photo/imprimer.png) no-repeat 0px -18px;
	display: block;
   	width: 6%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0;
	text-decoration: none;
}

#menu_deroulant .imprimer:hover
{ 
    background: url(photo/imprimer.png) no-repeat 0px 0px;
} 

#menu_deroulant .youtube
{
    float: right;
	background: url(photo/youtube.png) no-repeat 0px -18px;
	display: block;
   	width: 6%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0;
	text-decoration: none;
}

#menu_deroulant .youtube:hover
{ 
    background: url(photo/youtube.png) no-repeat 0px 0px;
} 

#menu_deroulant .commentaire
{
    float: right;
	background: url(photo/commentaire.png) no-repeat 0px -18px;
	display: block;
   	width: 6%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0;
	text-decoration: none;
}

#menu_deroulant .commentaire:hover
{ 
    background: url(photo/commentaire.png) no-repeat 0px 0px;
} 

#menu_deroulant .plus_de_photos
{
    float: right;
	background: url(photo/plus_de_photos.png) no-repeat 0px -18px;
	display: block;
   	width: 6%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0;
	text-decoration: none;
}

#menu_deroulant .plus_de_photos:hover
{ 
    background: url(photo/plus_de_photos.png) no-repeat 0px 0px;
} 

#menu_deroulant .video
{
    float: right;
	background: url(photo/video.png) no-repeat 0px -18px;
	display: block;
   	width: 6%;
	height: 1.125rem;
	margin: 0.9375rem 0 0 0;
	text-decoration: none;
}

#menu_deroulant .video:hover
{ 
    background: url(photo/video.png) no-repeat 0px 0px;
} 




/****************************/
     /*menu de gauche*/
/****************************/

#menu_gauche
{
   float: left; /* Le menu flottera à gauche */
   width: 0%; /* Très important: donner une taille au menu *//* normalement 80px en width si corps fait 80px en left*/
   background-color: #67ff6a;
   border: 0px  solid white;
}


/****************************/
      /*menu de droite*/
/****************************/

#menu_droite
{
   float: right; /* Le menu flottera à gauche */
   width: 0%; /* Très important: donner une taille au menu */
   background-color: #67ff6a;
   border: 0px  solid white;
}

/****************************/
          /*corps*/
/****************************/

#corps
{
	width: 100%;
	height: auto;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

h1
{
	width: 100%;
	display: block;
	margin: 0 0 0 0.3125rem;
	padding: 0 0.125rem 0 0; /*leave this value alone*/
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 1.2em;
}

h1:first-letter
{
	text-transform: uppercase;
}

#sentier_de
{
	width: 100%;
	height: 3.125rem;
	display: block;
	margin: 0.9375rem 0 0.9375rem 8.75rem;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 1.1em;
}

#sentier_de:first-letter
{
	text-transform: uppercase;
}

.mention_legale
{
	width: 100%;
	display: block;
	margin: 1.875rem 0 0 0;
	padding: 0 0 0 0; /*leave this value alone*/
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.95em;
}

.mention_legale:first-letter
{
	text-transform: uppercase;
}

.plus_de_photo
{
	display: block;
	margin: 1.25rem 0 0 3.75rem;
	width: 80%;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 1.1em;
}
 
.plus_de_photo:first-letter
{
	text-transform: uppercase;
}


h2
{
	margin: 0.625rem 0 0.625rem 0.625rem;
	padding-bottom: 0.3125rem;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 1.1em;
}

.nom_commun
{
	width: 90%;
	display: block;
	margin: 1.25rem auto 0.625rem auto;
	padding: 0 0 0 0;
	text-align: center;
	font-family: "Arial Black", Arial, Verdana, serif;
	color: red;
}

.consulter_aussi_fiche_suivante /*h2 dans plus de photos*/
{
	display: none;
}

#video_h2
{
	margin: 0.625rem 0 0.625rem 0.625rem;
	padding-bottom: 0.3125rem;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 1.1em;
}

.fiches_creees_dans_fiche_plantes
{
	margin: 0.625rem 0 0.625rem 0;
	padding-bottom: 0.3125rem;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.8em;
}

.titre_jaune  /*titre des famille, particularités...*/
{
	color: #a3a222;
	font-weight: bold;
}

#corps .accueil
{
	display: block;
	margin: 0 0 0 1.875rem;
}

#corps p
{
	margin: 0;
	margin-top: 0.625rem;
	padding-left: 0.5rem; /*leave this value alone*/
	padding-right: 0.3125rem; /*leave this value alone*/
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}


#corps .video
{
	margin: 0;
	margin-top: 3.125rem;
	padding-left: 0.3125rem; /*leave this value alone*/
	padding-right: 0.9375rem; /*leave this value alone*/
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}


.majuscule a:first-letter
{
	text-transform: uppercase;
}


/* dans fiche plante */


#plante_precedente_plante_suivante
{
	width: 80%;
	height: 1.25rem;
	display: block;
	margin: 0.625rem 0 0 3.75rem;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-weight: bold;
}

.a_gauche
{
    display: block;
	width: 20%;
	color: var(--color-cyan);
	margin: 0;
	float: left;
	font-size: 1em;
	text-decoration: none;
}

.a_gauche:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	font-size: 1em;
	text-decoration: none;
}

.a_gauche:active /* Quand le visiteur clique sur le lien */
{
    color: green;
	text-decoration: none;
}

.a_droite
{
    display: block;
	width: 20%;
	color: var(--color-cyan);
	margin: 0;
	float: right;
	font-size: 1em;
	text-decoration: none;
}

.a_droite:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	font-size: 1em;
	text-decoration: none;
}

.a_droite:active /* Quand le visiteur clique sur le lien */
{
    color: green;
	text-decoration: none;
}

#plusdephoto_precedent_plusdephoto_suivant
{
	width: 80%;
	height: 1.25rem;
	display: block;
	margin: 0.625rem 0 0 3.75rem;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-weight: bold;
}

#sentier_precedent_sentier_suivant
{
	width: 80%;
	height: 1.25rem;
	display: block;
	margin: 0.625rem 0 0 3.75rem;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-weight: bold;
}


/* dans fiche sentier */

#sentier_de
{
	width: 100%;
	display: block;
	margin: 0.625rem 0 0 0;
	text-align: center;
	color: red;
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.95em;
}

.sentier_a_gauche
{
    display: block;
	width: 4%;
	color: var(--color-cyan);
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.7em;
	float: left;
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

.sentier_a_gauche:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	margin: 0 0 0 3.125rem;
	font-size: 0.7em;
	text-decoration: none;
	border-bottom: dotted 1px red; 
}

.sentier_a_gauche:active /* Quand le visiteur clique sur le lien */
{
    color: green;
	margin: 0 0 0 3.125rem;
	text-decoration: none;
	border-bottom: dotted 1px green; 
}

.sentier_a_droite
{
    display: block;
	width: 4%;
	color: var(--color-cyan);
	font-family: "Arial Black", Arial, Verdana, serif;
	font-size: 0.7em;
	float: right;
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

.sentier_a_droite:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	margin: 0 3.125rem 0 0;
	font-size: 0.7em;
	text-decoration: none;
	border-bottom: dotted 1px red; 
}

.sentier_a_droite:active /* Quand le visiteur clique sur le lien */
{
    color: green;
	margin: 0 3.125rem 0 0;
	text-decoration: none;
	border-bottom: dotted 1px green; 
}



.lien
{
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 1em;
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

.lien:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	text-decoration: none;
	border-bottom: dotted 1px red; 

}

.lien:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
	border-bottom: dotted 1px green; 
}


.ancre_vers_carte_google_de_sentier_php
{
	display: none;
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 1em;
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

.ancre_vers_carte_google_de_sentier_php:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	text-decoration: none;
	border-bottom: dotted 1px red; 
}

.ancre_vers_carte_google_de_sentier_php:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
	border-bottom: dotted 1px green; 
}


p .lien_famille
{
	display: block;
	float: left;
	width: 80%;
	height: auto;
	margin: 0 0 0.625rem 1.5625rem;
	padding: 0 0 0 0;
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 0.9em;
   	text-decoration: none;
}

p .lien_famille:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
   	text-decoration: none;
	border-bottom: dotted 1px red; 
}

p .lien_famille:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
	border-bottom: dotted 1px green; 
}

p .lien_famille:visited /* Quand le visiteur clique sur le lien */
{
    color: black;
   	text-decoration: none;
	border-bottom: dotted 1px black; 
}

/****************************/
/* courte information */
/****************************/


#courte_info
 {
	display: block;
	position: relative;
    top: -55.9375rem;
	margin-left: auto;
    margin-right: auto;
	width: 21.875rem;
	height: auto;
	padding: 0 0 0 0; /*leave this value alone*/
	Z-Index: 1;
}

#corps  .courte_information
 {
	margin: 0 0 0 0;
	padding: 0.25rem 0.25rem 0.25rem 0.25rem; /*leave this value alone*/
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
	color: var(--color-navy);
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/****************************************************/
/*      	 vidéo dans les fiches plantes   	    */
/****************************************************/

#ancre_video_fiche_plante
{
   float: left; /* Le menu flottera à gauche */
   margin: 0.3125rem 0.9375rem 0.625rem 0.3125rem;
}

.centrer
{
	text-align: center;
}

.source
{
	margin: 0.625rem 0.9375rem 0 0;
	padding: 0 0 6.25rem 0;
	color: #a3a222;
	text-align: right; /* texte non justifié si justifier, rajouter justify */
}

.patienter
{
	margin: 0 0 1.25rem 0;
	padding: 0 0 0 0;
	color: none;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
}


/********************************************************/
    /*diaporama plus de photo fiche-plante dans le corps*/
/********************************************************/

/********************************************************/
    /*diaporama plus de photo fiche-plante dans le corps*/
/********************************************************/

#diaporama
{
	position: relative; /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	margin: -34.375rem 2.5rem 0 1.5625rem; 
	height: 31.25rem;
	width: 90%;
	Z-Index: 1;
}

#dia 
{
	float: right; /* Le menu flottera à gauche */
	width: 10%;
	margin: 1.25rem 0.625rem 0 0; 
	padding: 0 0 0 0; /*leave this value alone*/
}

#dia .premier 
{
	display: block;
	float: left;
	margin: 0.3125rem 0 0.5625rem 0.625rem;
	width: 2.6875rem; /* empêche le clignotement de la grande image */
	height: 2.6875rem; /* empêche le clignotement de la grande image */
   background: url('photo/doigt.png') no-repeat;
}

#dia .premier img 
{
	position: absolute; /* position de la grande photo au niveau où se trouve les petites images suivant la position qui est donné ci dessous par les margin  */
	left: 13%;
	top: 3.125rem;
	width: 17.5625rem; /* taille de la photo ouverte  */
	height: 23.4375rem;
	border: 0px solid black;
}

#dia .premier:hover 
{
	float: left;
	margin: 0.3125rem 0 0.5625rem 0.9375rem;
	width: 2.6875rem; /* empêche le clignotement de la grande image */
	height: 2.6875rem; /* empêche le clignotement de la grande image */
}

/* grande image */

#dia .premier:hover img 
{
	position: absolute; /* position de la grande photo au niveau où se trouve les petites images suivant la position qui est donné ci dessous par les margin  */
	left: 13%;
	top: 3.125rem;
	width: 17.5625rem; /* taille de la photo ouverte  */
	height: 23.4375rem;
	border: 0px solid black;
}

#dia .suivant 
{
	display: block;
	float: left;
	margin: 0.3125rem 0 0.5625rem 0.9375rem;
	width: 2.6875rem; /* empêche le clignotement de la grande image */
	height: 2.6875rem; /* empêche le clignotement de la grande image */
}

#dia .suivant img 
{
	margin-left: auto;
    margin-right: auto;
	width: 2.6875rem;
	height: 2.6875rem;
	border: 0;
}

#dia .suivant:hover 
{
	float: left;
	margin: 0.3125rem 0 0.5625rem 0.9375rem;
	width: 2.6875rem; /* empêche le clignotement de la grande image */
	height: 2.6875rem; /* empêche le clignotement de la grande image */
}

/* grande image */

#dia .suivant:hover img 
{
	position: absolute; /* position de la grande photo au niveau où se trouve les petites images suivant la position qui est donné ci dessous par les margin  */
	left: 13%;
	top: 3.125rem;
	width: 17.5625rem; /* taille de la photo ouverte  */
	height: 23.4375rem;
}

/****************************/
    /*image dans le corps*/
/****************************/

.float_droite
{
	margin: 0 0 0.3125rem 0.625rem; 
	float: right; 
}


.float_gauche
{
	margin: 0 0.625rem 3.125rem 0; 
	float: left; 
}

#centrer_image
{
	width: 100%;
}

#image
{
	width: 25rem;
	height: 48.75rem; 
	margin-left: auto;
    margin-right: auto;
	margin-top: 9.375rem;
}

#image p
{
	padding: 0 1.25rem 0 0;
}

#image img
{
	display: block;
	padding: 0 0.1875rem 0 0; 
	float: right; 
	margin: 0 0 0.5625rem 0.4375rem;
}

#image .calendrier_large
{
	display: none;
}

#image .calendrier_small
{
	display: block;
	float: right; 
	padding: 0 0 0 0; 
	margin: 0 0 0 0;
}



/****************************************/
  /*diaporama des différentes familles*/
/****************************************/


 .a_block_famille {
	display: block;
	float: left;
	width: 7.1875rem;
	height: 15rem;
	margin: 0 0 1.25rem 0.625rem;
	padding: 0.3125rem 0 0 0.3125rem;
	border: 2px solid #B9B9B9;
	border-radius: 0.4375rem;
	text-decoration: none;
}

.a_block_famille:hover {
	border: 2px solid #B9B9B9;
	border-radius: 0.4375rem;
	text-decoration: none;
}

.a_block_famille img {
	width: 6.875rem;
	height: 9.875rem;
}

.text_nom_famille{
	display: block;
	background-color: #638dcb;
	width: 6.875rem;
	height: 1.875rem;
	margin: 0 0 0.3125rem 0;
	padding: 0.625rem 0 0 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.70em;
	Font-Weight: Bold;
	color: white;
	border-radius: 0.3125rem;
}

.text_nom_genre_espece_dans_famille {
	display: block;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}



/****************************************/
    /*diaporama photo alphabet*/
/****************************************/


#gallery {
	position: relative; /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	padding: 0.9375rem 0 0 0;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
	border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}
#gallery::after {
	content: "";
	display: table;
	clear: both;
}

#thumbs a {
	display: block;
	float: left;
	margin: 0 0 2.8125rem 1.375rem;
	width: 6.875rem;
	height: 9.875rem;
	text-decoration: none;
}
#thumbs a img {
	width: 6.875rem;
	height: 9.875rem;
	border: #ffff00 0.5px ridge;
}
#thumbs a:hover {
	border: none;
}

#thumbs .text_image {
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#gallery .texte
{
	display: block;
	float: left;
	margin: 0 0 2.5rem 0.9375rem;
	padding: 2.8125rem 0 0 0;
	width: 6.875rem;
	height: 7.0625rem;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
	border: #ffff00 0.5px ridge;
	background-color: var(--color-pale-blue);
}

#gallery .texte:hover
{
	border: #ffff00 0.5px ridge;
}

/***********************************************/
    /*diaporama photo alphabet dans accueil*/
/***********************************************/

#fiche_cree_fiche_modifiee{
	display: block;
	width: 100%;
	height: 33.125rem;
	padding-top: 0.625rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

#gallery_accueil 
{
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: 25rem;
	padding-top: 0.625rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

#gallery_consulter_aussi_fiche_suivante /*gallery dans plus de photos de*/
{
	display: none;
}

#gallery_fiche_plante {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: 12.5rem;
	padding-top: 0.625rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}

#thumbs_accueil a {
	display: block;
	float: left;
	margin: 0 0 2.8125rem 1.1875rem;
	width: 6.875rem;
	height: 9.875rem;
	text-decoration: none;
}
#thumbs_accueil a img {
	width: 6.875rem;
	height: 9.875rem;
	border: #ffff00 0.5px ridge;
}
#thumbs_accueil a:hover {
	border: none;
}

#thumbs_accueil .text_image {
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}


/***************************************************/
    /*diaporama photo plante et texte dans sentier */
/***************************************************/
#trois_photo_sentier
{
	display: block;
	width: 100%;
	height: 12.5rem;
	padding-left: auto;
    padding-right: auto;
}

#trois_photo_sentier .image_chemin_dans_sentier
{
	width: 30%;
	float: left;
	margin: 0.1875rem 0 0.625rem 0.625rem;
}

#sentier_de_description
{
	display: block;
	width: 90%;
	margin: 0 0 0 1.25rem;
}


#gallery_plante_sentier {
	position: relative; /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	padding-top: 1.875rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    border-top: 1px  solid white;
	border-bottom: 1px  solid white;
    background-color: white;
}
#gallery_plante_sentier::after {
	content: "";
	display: table;
	clear: both;
}

#thumbs_presentation_fleur_sentier  {
	float: left;
	margin: 0 0 0.625rem 1.875rem;
	width: 90%;
	height: 11.875rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;

}

#thumbs_presentation_fleur_sentier a {
	display: block;
	float: left;
	margin: 0 0 2.8125rem 0.3125rem;
	padding: 0.9375rem 0 0 0;
	width: 6.875rem;
	height: 9.875rem;
	text-decoration: none;
}
#thumbs_presentation_fleur_sentier a img {
	width: 6.875rem;
	height: 9.875rem;
	border: #ffff00 0.5px ridge;
}
#thumbs_presentation_fleur_sentier a:hover {
	border: none;
}

#thumbs_presentation_fleur_sentier .lien_image {
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#thumbs_presentation_fleur_sentier .nom_plante {
	display: block;
	margin: 1.25rem 0.3125rem 0.125rem 7.5rem;
	width: 50%;
	height: 1.25rem;
	font-weight: bold;
	color: red;
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_presentation_fleur_sentier .nom_plante:first-letter{
	text-transform: uppercase;
}

#thumbs_presentation_fleur_sentier .text {
	display: block;
	margin: 1.875rem 0.3125rem 0.625rem 7.5rem;
	width: 60%;
	height: 6.875rem;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_presentation_fleur_sentier .text:first-letter{
	text-transform: uppercase;
}


/***************************************************/
			/*carte google des sentiers  */
/***************************************************/
.h2_carte_google_des_sentiers
{
	display: none;
}

.p_carte_google_des_sentiers
{
	display: none;
}

#carte_google_des_sentiers 
{
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	display: none;
	width: 90%;
	height: auto;
	padding-top: 0.3125rem;
    margin: 0 0 0 1.875rem; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    background-color: white;
}


/***************************************************/
    /*diaporama photo et texte dans sentier.php */
/***************************************************/

#gallery_sentier {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: auto;
	padding-top: 0.3125rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    background-color: white;
}

.image_sentier_gauche
{
	display: block;
	float: left;
	margin: 0.1875rem 0.375rem 0.625rem 0.1875rem;
}

.image_sentier_droite
{
	display: block;
	float: right;
	margin: 0.1875rem 0.1875rem 0.625rem 0.375rem;
}



#thumbs_sentier  {
	margin: 0 0 0.625rem 0.625rem;
	width: 94%;
	height: 13.125rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;
}

#thumbs_sentier .image_sentier_gauche {
	float: left;
	display: block;
	margin: 0.1875rem 0 0 0.625rem;
	padding: 0 0 0 0;
	width: 45%;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#thumbs_sentier .image_sentier_gauche img {
	width: 75%;
	border: #ffff00 0.5px ridge;
}

#thumbs_sentier .image_sentier_gauche:hover {
	margin: 0.1875rem 0 0 0.625rem;
	border: none;
}


#thumbs_sentier .nom_sentier {
	display: block;
	float: right;
	width: 45%;
	height: 1.25rem;
	font-weight: bold;
	color: red;
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_sentier .nom_sentier:first-letter{
	text-transform: uppercase;
}

#thumbs_sentier .text_sentier {
	display: block;
	float: right;
	width: 45%;
	height: 6.25rem;
	text-decoration: none;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */

}

#thumbs_sentier .text_sentier:first-letter{
	text-transform: uppercase;
}

#thumbs_sentier .ancre_vers_carte_google
{
	display: none;
	margin: -0.3125rem 0 0.1875rem 13.25rem;
	width: 60%;
	height: 4.0625rem;
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	text-decoration: none;
}

#thumbs_sentier .ancre_vers_carte_google:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	text-decoration: none;

}

#thumbs_sentier .ancre_vers_carte_google:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
}


/***************************************************/
/*               article.php                       */
/***************************************************/

#gallery_article {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: auto;
	padding-top: 0.3125rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    background-color: white;
}


#thumbs_article  {
	margin: 0 0 0.625rem 0.625rem;
	width: 94%;
	height: 12.5rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;
}

#image_article {
	float: left;
	display: block;
	width: 35%;
	margin: 0.625rem 0 0 0.625rem;
	text-decoration: none;
	color: var(--color-navy);
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#image_article img {
	width: 70%;
}

#image_article a:hover {
	border: none;
}

#text_ensemble_article {
	display: block;
	float: right;
	height: 9.375rem;
	width: 60%;
	color: var(--color-navy);
}


#text_ensemble_article .text_date_article {
	float: right;
	height: 0.9375rem;
	width: 90%;
	text-align: right; 
}

#text_ensemble_article .titre_article {
	display: block;
	float: right;
	width: 90%;
	height: 1.25rem;
	font-weight: bold;
	color: red;
	text-align: justify; 
}

#text_ensemble_article .titre_article:first-letter{
	text-transform: uppercase;
}

#text_ensemble_article .paragraphe_1 {
	display: block;
	float: right;
	width: 90%;
	height: 6.25rem;
	text-decoration: none;
	color: var(--color-navy);
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#text_ensemble_article .paragraphe_1:first-letter{
	text-transform: uppercase;
}

/*****************************************************/
/*                  article_sur.php                  */
/*****************************************************/

#article_sur {
	width: 100%;
	padding-top: 0.3125rem;
    margin: 0 auto 0 auto; 
    background-color: white;
	color: var(--color-navy);
}

#article_sur_paragraphe {
	width: 90%;
	min-width: 22.5rem;
	margin: 0 auto 0.625rem auto;
	padding: 0.625rem 0.625rem 0.625rem 0.625rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;
}

#image_gauche_article_sur_paragraphe {
	margin: 0 0 0 0;
	text-decoration: none;
}

#image_gauche_article_sur_paragraphe img{
	display: block;
	margin-left: auto;
    margin-right: auto;
}

#article_sur_paragraphe .text_date_article {
	text-align: right; 
}

#article_sur_paragraphe .text_le_titre_de_l_article {
	font-weight: bold;
	color: red;
	text-align: right; 
}

#article_sur_paragraphe .text_paragraphe:first-letter{
	text-transform: uppercase;
}

#article_sur_paragraphe .text_paragraphe {
	text-decoration: none;
	text-align: justify; 
}

#article_sur_paragraphe .text_paragraphe:first-letter{
	text-transform: uppercase;
}

#image_droite_article_sur_paragraphe {
	margin: 0 0 0 0;
	text-decoration: none;
}

#image_droite_article_sur_paragraphe img{
	display: block;
	margin-left: auto;
    margin-right: auto;
}


/***************************************************/
					/* minichat */
/***************************************************/

#barre_minichat_couleur_fond
{
	margin: 0 0 0 0.625rem;
	padding: 0 0 0 0; 
	width: 97%;
	height: 3.125rem;
	background-color: var(--color-pale-blue);	
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#barre_minichat
{
	width: 100%;
	height: 3.125rem;
	margin: 0 0 0 0.625rem;
	background: url(photo/photo_minichat.jpg);
	background-repeat: no-repeat;
	background-position: 0% 5%;
}

#barre_minichat .nombre_avis
{
	display: block; 
	width: 10%;
	height: 0.625rem;
	margin: 2.5rem 0 0 2.375rem;
	padding: 0.4375rem 0 0 0.625rem;
	color: white;
	font-family: Arial, Verdana, serif;
	font-weight: bold;
	font-size: 0.8em;
}

#barre_minichat .text_avis
{
	display: block; 
	width: 60%;
	height: 0.625rem;
	margin: -0.625rem 0 0 8.125rem;
	color: var(--color-brand-blue);
	font-family: Arial, Verdana, serif;
	font-weight: bold;
	font-size: 0.8em;
}

#formulaire_minichat 
{
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 94%;
	height: auto;
    margin: 0.9375rem 0 0 0.625rem; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
	padding: 0.3125rem 0 0.3125rem 0.625rem;
	border: 1px var(--color-pale-blue) solid;
    background-color: #E7ECF1;
	font-size: 1em;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#formulaire_minichat .pseudo { 
	display: block; 
    margin: 0 0 0 0.625rem;
	width: 30%; 
}

#formulaire_minichat .message { 
	display: block; 
    margin: 0 0 0 0.625rem;
	width: 30%; 
	height: 2.5rem;
}

#formulaire_minichat .mottexte { 
	display: block; 
    margin: 0 0 0 0.625rem;
	width: 30%; 
}

#formulaire_minichat .email { 
	display: none; 
	width: 30%; 
}

#formulaire_minichat .envoyer { 
	display: block; 
	width: 30%;
	height: 6.25rem;
	float: right;
    margin: 0.9375rem 3.125rem 0 1.5625rem;
}

#gallery_minichat {
	/*position: relative;*/ /* position de la grande photo au niveau où se trouve les petites images sans ca elle se trouve tout en haut de la page*/
	width: 100%;
	height: auto;
}

#thumbs_minichat   {
    margin: 2.5rem 0 0 0.625rem; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
}

#thumbs_minichat span  {
	width: 98%;
	display: table;
	text-decoration: none;
	border: 1px var(--color-pale-blue) solid;
    background-color: #E7ECF1;
	border-radius: 0.3125rem;
	box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

#thumbs_minichat span .text_pseudo {
	display: block;
	width: 50%;
	float: left;
	margin: 0.3125rem 0 0 0.625rem;
	color: var(--color-navy);
	font-weight: bold;
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_minichat span .text_pseudo_dans_accueil
{
	display: block;
	float: right;
	margin: 0.3125rem 0.625rem 0 0.625rem;
	color: var(--color-cyan);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
	text-decoration: none;
	border-bottom: dotted 1px var(--color-cyan); 
}

#thumbs_minichat span .text_pseudo_dans_accueil:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
	text-decoration: none;
	border-bottom: dotted 1px red; 

}

#thumbs_minichat span .text_pseudo_dans_accueil:active /* Quand le visiteur clique sur le lien */
{
    color: green;
   	text-decoration: none;
	border-bottom: dotted 1px green; 
}


#thumbs_minichat span .text_date_creation {
	display: block;
	margin: 0.3125rem 0 0 0.625rem;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_minichat span .text_date_creation_dans_accueil {
	display: block;
	float: left;
	width: 30%;
	margin: 0.3125rem 0 0 0.625rem;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}


#thumbs_minichat span .text_nom_plante_dans_accueil {
	display: block;
	margin: 0.3125rem 0 0 0.625rem;
	color: var(--color-navy);
	font-weight: bold;
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#thumbs_minichat span .text_message {
	margin: 0.625rem 0.625rem 0.125rem 0.625rem;
	color: var(--color-navy);
	font-family: Arial, Verdana, serif;
	font-size: 0.8em;
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}


/***************************************************/
/*               video.php                       */
/***************************************************/

#gallery_video {
	width: 100%;
	height: auto;
	padding-top: 0.3125rem;
    margin: 0; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
    background-color: white;
}


#thumbs_video  {
	margin: 0 0 0.625rem 0.625rem;
	width: 94%;
	height: 12.5rem;
	text-decoration: none;
	border: 2px solid var(--color-pale-blue);
	border-radius: 0.4375rem;
}

#image_video {
	float: left;
	display: block;
	width: 35%;
	margin: 0.625rem 0 0 0.625rem;
	text-decoration: none;
	color: var(--color-navy);
	text-align: center; /* texte non justifié si justifier, rajouter justify */
	font-weight: bold;
}

#image_video img {
	width: 90%;
}

#image_video a:hover {
	border: none;
}

#text_ensemble_video {
	display: block;
	float: right;
	height: 9.375rem;
	width: 60%;
	color: var(--color-navy);
}


#text_ensemble_video .text_date_video {
	float: right;
	height: 0.9375rem;
	width: 90%;
	text-align: right; 
}

#text_ensemble_video .titre_video {
	display: block;
	float: right;
	width: 90%;
	height: 1.25rem;
	font-weight: bold;
	color: red;
	text-align: justify; 
}

#text_ensemble_video .titre_video:first-letter{
	text-transform: uppercase;
}

#text_ensemble_video .text_video {
	display: block;
	float: right;
	width: 90%;
	height: 6.25rem;
	text-decoration: none;
	color: var(--color-navy);
	text-align: justify; /* texte non justifié si justifier, rajouter justify */
}

#text_ensemble_video .text_video:first-letter{
	text-transform: uppercase;
}

/********************************/
       /*formulaire accès bdd*/
/********************************/
.formulaire label
{
   float: right; /* texte non justifié si justifier, rajouter justify */
   padding-top: 0.625rem; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
}

/****************************/
       /*pied de page*/
/****************************/

#pied_de_page
{
	width: 100%;
	height: 3.25rem;
	margin: 0 0 0.625rem 0;
	padding: auto; 
    border-top: 1px  solid white;
	border-bottom: 1px  solid var(--color-brand-blue);
    background: url('photo/coin_gauche.jpg') no-repeat;
}

#pied_de_page p
{
	font-family: Arial, Verdana, serif;
	font-size: 0.7em;
	font-weight: bold;
	text-align: center; 
	color: var(--color-brand-blue);
}

#pied_de_page a
{
	color: var(--color-brand-blue);
	font-weight: bold;
	text-decoration: none;
}

#pied_de_page a:hover /* Quand le visiteur pointe sur le lien */
{
	color: red;
}

#pied_de_page a:active /* Quand le visiteur clique sur le lien */
{
   color: #008000;
}

/****************************/
       /*cache*/
/****************************/

#cache a{
	color: var(--color-brand-blue);
	font-size: 0.7em;
	text-align: left; /* texte non justifié si justifier, rajouter justify */
}

#cache a:hover /* Quand le visiteur pointe sur le lien */
{
	color: var(--color-brand-blue);
}

#cache a:active /* Quand le visiteur clique sur le lien */
{
   color: var(--color-brand-blue);
}

/*.imagetest img {
display: none;
position: absolute;
top: 19.375rem;
left: 6.25rem;
border: none;
}
.imagetest:hover  img 
{
display: inline;
} 
*/

}