﻿@media (max-width: 767px) {

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body, .global, .main {
   width: auto;
   margin: 0;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
.main, .sidebar, .footer-container, .footer-content, .footer-seo, .col-1, .col-2, .col-3, .col-4, .list-horizontal li, .list-news li, .news-une img {
	clear: both;
	float: none;
	width: auto;
 }
 
 .col-1, .col-2, .col-3, .col-4, .list-news li {
	margin: 0 0 2em 0;
 }

 /* masquer les éléments superflus */
	.hide-mobile {
	  display: none !important;
	}
	.section-footer {
		border: 0;
		margin: 0;
	}
	.global, .footer-seo {
		padding: 0;
	}
	.main {
		border: 0;
		padding: 0 2em;
	}
	.header {
		border-bottom: 5px solid #e7e7e7;
		min-height: 39px;
	}
	.logo {
		font-size: 2em;
		margin: .5em 0 0 2em;
		position: absolute;
		z-index: 200;
	}
	.logo img {
		width: 22px;
	}
	
	.nav-button {
		background: url('../img/mobile/icon_menu.gif') center no-repeat;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 32px;
		height: 39px;
		cursor: pointer;
		border: 0 none;
		padding: 0;
		z-index: 500;
		text-indent: -9999px;
	}
	.nav-button:hover, .nav-button.open { 
		background: url('../img/mobile/icon_menu_actif.gif') center no-repeat;
	}
	
	.menu, .search {
		width: 100%;
		float: none;
		display: block;
		margin: 0;
		padding: 0;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 200;
		clear: both;
	}
	
	.menu li, .menu li:hover {
		border-bottom: 1px solid #fff;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
		border-radius: 0;
		display: none;
		float: none;
		font-size: 14px;
		margin: 0;
		padding: 0;
		text-align: left;
		width: 100%;
	}
	
	.menu.open, .search.open { 
		height: auto; 
		top: 43px;
	}
	.menu.open li, .search.open { 
		display: block; 
	}
	
	.menu.open li {float: left;}
	
	.menu li a {
		color: #fff;
		display: block;
		font: bold 1em/1em Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
		padding: 1.25em 1em 1.25em 5em;
	}
	.menu .current {
		border-bottom: 1px solid #fff;
	}
	
	.menu li.menu-orange {
		background: #f86024 url('../img/mobile/icon_fiches.gif') 20px 5px no-repeat;
	}
	.menu li.menu-orange li {
		border-bottom: 1px solid #f86024;
	}
	.menu li.menu-jaune {
		background: #e8a014 url('../img/mobile/icon_travaux.gif') 20px 5px no-repeat;
	}
	.menu li.menu-jaune li {
		border-bottom: 1px solid #e8a014;
	}
	.menu li.menu-rose {
		background: #c8487b url('../img/mobile/icon_jardiniers.gif') 20px 5px no-repeat;
	}
	.menu li.menu-rose li {
		border-bottom: 1px solid #c8487b;
	}
	.menu li.menu-vert {
		background: #6b8e11 url('../img/mobile/icon_nature.gif') 20px 5px no-repeat;
	}
	.menu li.menu-vert li {
		border-bottom: 1px solid #6b8e11;
	}
	.menu li.menu-bleu {
		background: #1abec0 url('../img/mobile/icon_cuisine.gif') 20px 5px no-repeat;
	}
	.menu li.menu-bleu li {
		border-bottom: 1px solid #1abec0;
	}
	.menu li.menu-vert-clair {
		background: #cfd612 url('../img/mobile/icon_jardin.gif') 20px 5px no-repeat;
	}
	.menu li.menu-vert-clair li {
		border-bottom: 1px solid #cfd612;
	}
	.menu-vert-clair.current a {color: #fff !important;}
	
	/* Submenus */
	
	.menu ul ul {
		border-top: 1px solid #fff;
		border-bottom: 0;
		position: relative;
	}
	.menu ul ul li {
		font-size: 14px;
		padding: 0;
	}
	.menu ul ul li:hover,.menu ul ul li.current {
		background-image: none;
	}
	.menu ul ul li a {
		padding: 1em 1em 1em 6em;
	}
	.current .sub-menu {display: none;}
	
	.search-button {
		background: url('../img/mobile/icon_search.gif') 0 0 no-repeat;
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		height: 39px;
		cursor: pointer;
		border: 0 none;
		padding: 0;
		z-index: 500;
		text-indent: -9999px;
	}
	.search-button:hover, .search-button.open {
		background-position: 0 -39px;
	}
	.search {
		background: #a7a7a7;
		display: none;
	}
	
	#form_search {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	border: 0;
	float: none;
	height: auto;
	margin: 0 auto;
	padding: 1em;
	width: auto;
	}
	#input_search {
		width: 84%;
	}
	#submit_search {
		float:none;
	}
	
	.news-une img {
		display: block;
		margin: 0 auto 1em auto;
	}

	.slideshow-recettes {
		padding: 2.5em 5% 0;
	}
	.recettes h3 {
		border-bottom: 5px solid #00BBC2;
		margin: 0 0 1em;
		padding: 0 0 .75em;
	}
	.diaporama {
		text-align: center;
	}
	.selection li {
		border-top: 1px solid #ccc;
		margin: 0;
		padding: 1em 0 1em 4em;
	}
	.selection li h2 {
		margin: 0;
	}
	.selection li a {
		border-left: 1px solid #ccc;
		padding: 0 0 0 1em;
	}
	.book {
		background: url('../img/mobile/icon_book.gif') center left no-repeat;
	}
	.blog {
		background: url('../img/mobile/icon_blog.gif') center left no-repeat;
	}
	.flower {
		background: url('../img/mobile/icon_flower.gif') center left no-repeat;
	}
	.botanique {
		background: url('../img/mobile/icon_botanique.gif') center left no-repeat;
	}
	#form_avis textarea {
		width: 97%;
	}
	.slideshow-fiche {
		height: auto;
	}
	.slideshow-fiche .bx-controls-direction a {
		top: 64%;
	}
	.slideshow-fiche, .slideshow-fiche-b {
		background: #e7e7e7;
		padding: 2em;
		text-align: center;
	}
	.slideshow-fiche .thumb {
		float: none;
		margin: 0 auto;
	}
	.slideshow-fiche .texte-slide, .chapo, .slideshow-fiche .chapo, .chapo.right  {
		float: none;
		height: auto;
		text-align: left;
		width: auto;
	}
	.slideshow-fiche .bx-next {
		right: 0;
		left: auto;
	}
	.slideshow-fiche-b {
		float: none;
		margin: 0 auto 2em auto;
		width: auto;
	}
	.img-fancybox {
		text-align: center;
		width: auto;
	}
	.img-fancybox .caption, .img-fancybox-vertical .caption {
		background: none;
		color: #444;
		height: auto;
		line-height: 1.2em;
		margin: 0 0 1em 0;
		padding: 0;
		position: relative;
		width: auto;
	}
	.article-header .share {
		clear: both;
		float: none;
		padding: .5em 0;
	}
	.etape-fiche p {
		overflow: visible;
	}
	.pagination {
		color: #fff;
	}
	.pagination a {
		display: none;
	}
	.footer-content {
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
	}
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
	h3 a {
		display: block;
		background: url('../img/mobile/link.gif') center right no-repeat;
	}
	.travaux h2 {
		font-size: 1.6em;
	}
	.slideshow-une .bx-prev {
		left: 0;
	}
	.slideshow-une .bx-next {
		right: 0;
	}
	.menu li a {
		font-size: 12px;
	}
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
	.list-fiches li {
		float: none;
	}
}

/* iPads (portrait and landscape) ----------- */
@media screen and (min-width : 768px) and (max-width : 1024px),
screen and (min-device-width : 800px)
and (max-device-width : 1280px)
and (orientation : portrait) {
	.hide-tablet {
		display: none !important;
	}
	.global, .main, .sidebar, .footer-container, .footer-content, .footer-seo {
		clear: both;
		float: none;
		width: auto;
	}
	.main {
		border: 0;
	}
	.page {
		margin: 4em 0 0;
	}
	.logo {
		font-size: 4.2em;
		margin: .5em 0;
	}
	.logo img {
		height: auto;
		width: 32px;
	}
	.menu {
		background: #f5f5f5;
		float: left;
		position: relative;
		text-align: center;
		top: 0;
		width: 100%;
	}
	.menu li {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
		border-radius: 0;
		margin: 0;
		font-size: 1.2em;
		padding: .65em 0 .5em 0;
		width: 16.666%
	}
	.sub-menu {
		width: 100%;
	}
	.sub-menu li {
		font-size: 1em;
		padding: 0.65em 0.5em 0.5em;
		width: auto;
	}
	#form_search {
	border-top: 1px solid #e8e8e8;
	margin: 2em 0 0 0;
	}
	.recettes {
		width: 47.5%;
	}
	.recettes h3 {
		border-bottom: 5px solid #00BBC2;
		margin: 0 0 1em;
		padding: 0 0 .75em;
	}
	.recettes h3 a {
		color: #333;
	}
	.slideshow-recettes {
		padding: 2.5em 10% 0;
	}
	
	.slideshow-recettes a img {
		width: 100%;
	}
	.img-fancybox,.img-fancybox-vertical {
		float: left;
		margin: 0 2em 2em 0;
	}
}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (min-device-width : 800px)
and (max-device-width : 1280px)
and (orientation : portrait) {
	.sub-menu {
		margin: 21px 0 0 0 !important;
	}
	.menu li {
		height: 35px;
	}
	.sub-menu li {
		height: auto;
	}
	.menu-jaune .sub-menu, .menu-rose .sub-menu {
		margin: 0 !important;
	}
}

@media screen and (min-device-width : 800px) and (max-device-width : 1280px) {
	.global, .footer-container, .footer-content, .footer-seo {
		clear: both;
		float: none;
		width: auto;
	}
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-pixel-ratio : 1.5),
only screen and (min-pixel-ratio : 1.5) {
/* Styles */
}