/* Fleurs des champs - feuille de style unique (reprise des couleurs de l'ancien site, gamme fleurs) */

:root {
	--fond: #73739B;
	--fond-sombre: #5F5F81;
	--ligne-fonce: #515171;
	--ligne-claire: #64648B;
	--texte: #FFFFFF;
	--texte-sombre: #2D2D40;
	--encre: #1D1D26;
	--lien: #CCCC00;
	--lien-survol: #FFFF00;
	--clair: #D4D4F1;
	--ns: #C4C4E1;
	--discret: #38384C;
	--selection: #FA761F;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: var(--texte);
	background-color: var(--fond);
}

a { color: var(--lien); text-decoration: none; }
a:hover { color: var(--lien-survol); }
img { border: 0; max-width: 100%; height: auto; }

/* ---------- conteneurs ---------- */
#centrer {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 8px;
}
#main { width: 100%; }
p.retour { text-align: right; }

/* ---------- bandeau ---------- */
#header {
	margin: 10px auto 0 auto;
	max-width: 600px;
	height: 110px;
	border: 1px solid #FFFFFF;
	background-color: var(--fond-sombre);
	overflow: hidden;
}
#header, #header a { display: flex; }
#header a { width: 100%; height: 110px; }
#header_gauche {
	flex: 0 0 111px;
	border-right: 1px solid #FFFFFF;
	background: url(../interface/home_fleurs.jpg) no-repeat;
}
#header_droit {
	flex: 1 1 484px;
	background: url(../interface/bandeau_haut_fleurs.jpg) no-repeat;
}

/* ---------- pied de page ---------- */
#bottom {
	clear: both;
	margin: 30px 0 0 0;
	padding: 10px 0;
	text-align: center;
	font-size: 9px;
	border-top: 1px solid var(--discret);
}
#bottom .credits { font-weight: bold; color: var(--discret); }
#bottom .conditions { color: #C9DBEA; }

/* ---------- accueil ---------- */
.accueil { display: flex; flex-wrap: wrap; }
#main_gauche { flex: 1 1 400px; }
#main_droite {
	flex: 0 0 100px;
	margin: 15px 0 0 0;
	padding: 0 0 15px 0;
	text-align: center;
	background-color: var(--fond-sombre);
}
#main_droite img { margin: 10px 0 0 0; }
#main_gauche .titre { padding: 50px 0 0 0; }
#main_gauche .titre2 { padding: 30px 0 0 0; }
#main_gauche .titre a, #main_gauche .titre2 a { font-style: italic; color: #FFFFFF; }
#main_gauche .titre a { font-size: 28px; }
#main_gauche .titre2 a { font-size: 20px; }
#main_gauche .titre a:hover, #main_gauche .titre2 a:hover { text-decoration: underline; }
#main_gauche .sous_titre, #main_gauche .sous_titre2 {
	font-style: italic;
	font-weight: bolder;
	padding: 0 0 0 30px;
	color: var(--discret);
}
#main_gauche .sous_titre { font-size: 12px; }
#main_gauche .sous_titre2 { font-size: 10px; }

/* ---------- liste des plantes ---------- */
p.alphabet { font-size: 13px; line-height: 1.8; }
p.alphabet strong { color: var(--lien-survol); }
.tabindex {
	width: 100%;
	border: 1px solid var(--ligne-fonce);
	border-spacing: 1px;
	color: #313151;
}
.tabindex th, .tabindex td { padding: 3px; text-align: left; width: 50%; }
.tabindex th.titre a { color: var(--encre); font-weight: bold; }
.tabindex th.titre a:hover { color: var(--lien-survol); }
.tabindex th.trie a { text-decoration: underline; }
.tabindex tbody tr:nth-child(odd) { background-color: var(--ligne-fonce); }
.tabindex tbody tr:nth-child(even) { background-color: var(--ligne-claire); }
.tabindex a.libellens { color: var(--ns); font-style: italic; }
.tabindex a.libellens:hover { color: #FAF9FE; }
.tabindex td.vide { text-align: center; padding: 20px; font-weight: bold; color: #FFFFFF; }

/* ---------- fiche et detail ---------- */
#fleurs > #header { max-width: 900px; }
#decran {
	display: flex;
	max-width: 900px;
	margin: 30px auto 0 auto;
	color: #000028;
	background-color: var(--fond-sombre);
}
#dgauche {
	flex: 0 0 150px;
	padding-top: 40px;
	text-align: center;
}
#ddroite {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 20px;
	background-color: var(--fond);
	font-size: 12px;
	line-height: 1.5;
}
.presentation {
	width: 100%;
	margin: 0 0 20px 0;
	font-size: 14px;
	color: var(--texte-sombre);
	background-color: var(--fond-sombre);
	border-spacing: 5px;
}
.presentation th { width: 120px; text-align: right; font-weight: normal; }
.presentation td.droite { text-align: right; }
.nomcommun { font-weight: bold; color: var(--clair); }
.nomautre { font-weight: bold; color: var(--encre); }
.rubrique-fiche { margin: 0 0 1em 0; }
.rubrique-fiche p { margin: 0 0 0.5em 0; }
h2.rubrique {
	margin: 0;
	font-size: 12px;
	font-weight: normal;
	color: var(--clair);
	border-bottom: 1px dashed var(--clair);
}
.commentaire { padding: 5px 0 5px 20px; }
.rubcommentaire { color: #3D3D56; font-style: italic; }
p.observations {
	padding-left: 13px;
	font-size: 10px;
	color: #E0E0FF;
	background: url(../interface/fleche_fleurs.gif) no-repeat left center;
}
figure.detail {
	margin: 0;
	text-align: center;
	color: #FFFFFF;
	font-weight: bold;
}
figure.detail figcaption { margin-top: 1em; }

/* ---------- systeme expert ---------- */
h1.titre-expert { font-size: 12px; text-align: left; }
#sysrecherche {
	text-align: left;
	border-top: 6px solid #FFFFFF;
	border-bottom: 6px solid #FFFFFF;
}
#sysrecherche ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	border-bottom: 1px solid #FFFFFF;
}
#sysrecherche ul:last-child { border-bottom: 0; }
#sysrecherche li { margin: 0 22px 0 0; line-height: 18px; }
#sysrecherche li.libelle { width: 64px; padding-right: 4px; text-align: right; }
#sysrecherche ul.fleur li { margin-right: 16px; }
#sysrecherche ul.feuille { flex-wrap: nowrap; }
#sysrecherche ul.feuille li { margin-right: 10px; flex: 0 1 auto; min-width: 0; }
#sysrecherche li.criselect a, #sysrecherche li.criselect a:hover { color: var(--selection); font-weight: bold; }
#sysfleurs { margin-top: 20px; }
#sysfleurs .lignefleurs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 12px;
}
#sysfleurs .unefleur { text-align: center; }
#sysfleurs a { color: #C9DBEA; }

p.message { padding: 40px 0; text-align: center; font-weight: bold; }

/* ---------- petits ecrans ---------- */
@media (max-width: 640px) {
	#header_gauche { display: none; }
	#decran { flex-direction: column-reverse; }
	#dgauche { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px; }
	#dgauche p { margin: 0; }
	#ddroite { padding: 0 10px; }
	#sysfleurs .lignefleurs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- carte des observations ---------- */
#centrer.large { max-width: 900px; }
#centrer.large > #header { max-width: 900px; }
h1.titre-carte { font-size: 16px; }
form.choix-plante { margin: 0 0 10px 0; }
form.choix-plante select { max-width: 100%; }
#carte {
	height: 520px;
	border: 1px solid #FFFFFF;
	color: #000028;
}
.bulle-observation p { margin: 0 0 4px 0; font-size: 11px; }
.bulle-observation .bulle-titre { font-size: 12px; font-weight: bold; }
.bulle-observation a { color: #3D3D8C; }
p.observations a { color: #E0E0FF; text-decoration: underline; }
@media (max-width: 640px) {
	#carte { height: 400px; }
}