/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* RESET */

* { box-sizing:border-box; }
html { position:relative; display:block; }

body { position:relative; display:block; width:100%; margin:0; padding:0; font-family:Open Sans, sans-serif; font-size:0.8rem; font-weight:300; line-height:1.4; background-color:#262626; color:rgba(0,0,0,1); text-align:left; overflow-x:hidden; overflow-y:scroll; }
body.noscrollbar { overflow-y:hidden; }

header, main, footer { position:relative; display:block; width:100%; margin:0; padding:0; }

h1, h2, h3, h4, h5, h6 { position:relative; margin:0; padding:0; font-family:Open Sans, sans-serif; font-size:1.5rem; font-weight:600; color:inherit; }

div { position:relative; margin:0; padding:0; }

a, a:link, a:active, a:visited, a:focus { font-size:inherit; color:inherit; text-decoration:inherit; outline-color:transparent; }
body.desktop a:hover { color:inherit; text-decoration:underline; outline-color:transparent; }

img { margin:0; padding:0; border:0; }
svg { position:relative; display:inline-block; vertical-align:top; height:100%; width:100%; margin:0; padding:0; }

p { font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:1em 0 0 0; }
p:first-of-type, h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p { padding-top:0; }
span { position:relative; display:inline; font-size:inherit; margin:0; padding:0; }

ul { position:relative; margin:0; padding:0; }
li { position:relative; font-size:inherit; word-wrap:break-word; text-align:left; margin:0; padding:0; }
.fromrte ul { margin-left:1em; }

.wrap { display:block; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%; }
.cover { position:absolute; top:50%; left:50%; width:auto; height:auto; transform:translate(-50%, -50%); display:block; margin:0; padding:0; background-color:transparent; }
.cover.top { top:0; transform:translate(-50%,0); }
.cover.bottom { top:100%; transform:translate(-50%,-100%); }
.cover.left { left:0; transform:translate(0,-50%); }
.cover.topleft { left:0; top:0; transform:translate(0,0); }
.cover.bottomleft { left:0; top:100%; transform:translate(0,-100%); }
.cover.right { left:100%; transform:translate(-100%,-50%); }
.cover.topright { left:100%; top:0; transform:translate(-100%,0); }
.cover.bottomright { left:100%; top:100%; transform:translate(-100%,-100%); }
.cover > img, .cover > video, .cover > div, .cover > span { position:absolute; display:inline-block; width:100%; height:100%; left:0; top:0; }

.clear { clear:both; }
.blochref { cursor:pointer; }

pre, code { position:relative; font-size:13px; text-align:left; color:#c7254e; background-color: #f9f2f4; border-radius:0.5em; padding:0.8em; display:block; margin:0 0 1em 0; border:0; }

.ajaxloader { z-index:999999; position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,0.4); }
.ajaxloader svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:8%; height:auto; color:#000000; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/*    Mise en forme spécifique des formulaires   */
/*----------------------------------------------------------------------------------------------------------------------------------------------*/

input, textarea, select { position:relative; display:inline-block; vertical-align:top; width:100%; font-size:inherit; display:inline-block; background-color:#5f9764; color:#ffffff; line-height:2; height:2em; vertical-align:middle; margin:0; padding:0.1em 0.3em 0 0.3em; width:100%; border:0; border-radius:0; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none; }
textarea { height:6em; }
select { background-image:url(https://www.lesjardinsdematthieu.fr/_chartes_/jardins-matthieu/ressources/images/contribution/dropdown.svg) !important; background-size:1.5em; background-position: right center !important; background-repeat: no-repeat !important; padding-right:30px !important; }
select::-ms-expand { display: none; }
select option { color:#ffffff; }
select.placeholder { color:rgba(54,54,54,0.55) !important; }

/* Mise en forme des boutons radio et des checkboxes */
input[type="radio"] + span:before, input[type="checkbox"] + span:before, input[type="radio"] + span:after, input[type="checkbox"] + span:after {
	content:'' !important; position:absolute !important;
	left:0 !important; top:0 !important; /* on décale la case de 10% de sa taille pour bien la centrer en hauteur */
	width:1em !important; height:1em !important; /* on définit la taille de référence de la case à la même taille que la font du span */
	transform-origin: 50% 50% !important; /* pour être certain du point d'origine du scale pour la case et la coche */
	transition:all .2s !important; /* on prévoit une animation */
}
input[type="radio"], input[type="checkbox"] { position:absolute !important; left:0 !important; top:1em !important; opacity:0 !important; transform: scale(0) !important; height:1em !important; width:1em !important; } /* On masque le champ input (opacité 0) */
input[type="radio"] + span, input[type="checkbox"] + span { position:relative !important; cursor:pointer !important; padding-top:0 !important; padding-bottom:0 !important; padding-left:1.6em !important; } /* on prépare le label (balise span située à côté du champ input) */
input[type="radio"] + span:before, input[type="checkbox"] + span:before { border:1px solid #5f9764 !important; background-color:transparent !important; } /* Aspect général de la case */
input[type="radio"] + span:after, input[type="checkbox"] + span:after { border:1px solid transparent !important; background-color:#5f9764 !important; } /* Aspect général de la coche */
input[type="checkbox"] + span:before, input[type="checkbox"] + span:after { border-radius: 5% !important; } /* angles arrondis */
input[type="radio"] + span:before, input[type="radio"] + span:after { border-radius: 50% !important; } /* cases circulaires */
input[type="radio"]:not(:checked) + span:after, input[type="checkbox"]:not(:checked) + span:after { opacity: 0 !important; transform: scale(0) !important; } /* Aspect si "pas cochée" */
input[type="radio"]:checked + span:after, input[type="checkbox"]:checked + span:after { opacity: 1 !important; transform: scale(0.5) !important; } /* Aspect si "cochée" */

label { position:relative; display:inline-block; vertical-align:top; font-weight:300; }

button, a.button { position:relative; display:inline-block; vertical-align:top; font-family:Open Sans, sans-serif; font-size:inherit; font-weight:300; text-align:center; background-color:rgba(22,22,22,1); border:1px solid rgba(22,22,22,1); color:#ffffff; margin:0; padding:0.5em 1em; width:auto; outline:0; }
body.desktop button:hover, body.desktop a.button:hover { color:rgba(22,22,22,1); background-color:#ffffff; border-color:rgba(22,22,22,1); text-decoration:none; outline:0; }

body { font-size:1.1rem; }

label { font-weight:200; position:relative; }

select { background:#5f9764 url(../../_chartes_/jardins-matthieu/ressources/images/dropdown.png) right center no-repeat !important; padding-right:30px !important; }
select::-ms-expand { display: none; }
select option { color:#ffffff; }
select.placeholder { color:rgba(54,54,54,0.55) !important; }

textarea { height:6em; }

button, a.button { display:inline-block; font-size:1.5rem; text-transform:uppercase; text-align:center; background-color:#cacc46; border:1px solid #cacc46; color:#ffffff; margin:0; padding:0.5rem 1.5rem; width:auto; }
body.desktop button:hover, body.desktop a.button:hover { color:#cacc46; background-color:#dfdfdf; border-color:#cacc46; text-decoration:none; }

button.btn-primary, button.btn-primary:focus, body.desktop button.btn-primary:hover { background-color:#cacc46; border-color:#cacc46; }
button.btn { margin-top:1em; }

.asterisque { display:block !important; float:none !important; font-size:0.8rem !important; font-weight:100 !important; clear:both !important; text-transform:none !important; }

.reponse { text-transform:uppercase; text-align:center; margin:0 2rem; }
.reponse.succes { font-size:1.4rem; padding:5rem 0; }
.reponse.erreur { font-size:1rem; color:#ab2727; padding:0.5rem 0 2.5rem 0; }
.reponse li { font-size:0.8rem; text-transform:none; text-align:center; margin:1em 0 0 0; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* HEADER */
#en2mots { width:100%; max-width:2000px; margin:0 auto; position:relative; text-align:center; }

.liquide { margin: 0 auto; }

header { position:fixed; height:auto; top:0; width:100%; max-width:2000px; margin:0 auto; padding:0; z-index:130; transition: all 0.3s linear; overflow:hidden; }

header .fixe { position:absolute; width:100%; top:0; bottom:0; background-size:cover; background-position:center top; background-repeat: no-repeat; background-clip:border-box; background-image:none; background-attachment:normal; }

/* LOGO */
header #monogramme { display:inline-block; position:relative; z-index:200; width:66%; height:0; margin:0 0; padding:0;  padding-bottom:43%; opacity:1; text-align:center; transition: all 0.3s linear; }
header #monogramme img { display:block; margin:0; padding:0; padding-top:7%; position:relative; width:100%; }
header #logo { display:block; position:relative; width:15.9%; height:0; margin:0; padding:0; padding-bottom:0; opacity:0; z-index:400; text-align:center; transition: all 0.3s linear; }
header #logo img { display:block; margin:0; padding:5% 0; position:relative; width:100%; }
header #prix { display:inline-block; position:relative; z-index:200; width:20%; height:0; margin:0 auto; padding:0;  padding-bottom:43%; opacity:1; text-align:center; transition: all 0.3s linear; }
header #prix img { display:block; margin:0; padding:0; padding-top:7%; position:relative; width:100%; }

body.scroll header #monogramme, .interne header #monogramme {  padding-bottom:0; opacity:0; transition: all 0.3s linear; }
body.scroll header #prix, .interne header #prix {  padding-bottom:0; opacity:0; transition: all 0.3s linear; }
body.scroll header #logo, .interne header #logo {  padding-bottom:9%; opacity:1; transition: all 0.3s linear; }

/* NAVIGATION PRINCIPALE */
header nav { z-index:300; display:block; position:absolute; left:0; top:0; margin:0 auto; padding:0; width:100%; background-image:url('https://www.lesjardinsdematthieu.fr/_chartes_/jardins-matthieu/ressources/images/band-header.png'); background-repeat:no-repeat;  background-size:100%; background-position:center center; background-repeat: repeat-y; background-clip:border-box; text-align:center; }
body.scroll header nav, .interne header nav { padding-top:3rem; text-align:right; bottom:0; }

ul#menu-header { display:inline-block; position:relative; font-size:1.3rem; margin:0 auto; padding:0; right:0; width:auto; transition: all 0.3s linear; }
ul#menu-header li { display:inline-block; float:none; margin:0.8rem 0; padding:0; list-style-type:none; text-transform:uppercase; border-left:1px solid #ffffff; }
ul#menu-header li:first-child { padding-left:0; border-left:none; }
ul#menu-header li a { display:inline-block; color:#ffffff; text-decoration:none; padding:0.2rem 2rem; }
ul#menu-header li a:hover, ul#menu-header li a.on { color:#fbff00; text-decoration:none; }

ul#menu-header li.clients { position:fixed; left:0; top:32rem; background-color:#77aa82; border-radius:0 0 1rem 0; margin:0; padding:0; transform: rotate(-90deg); transform-origin: top left; text-transform:none; background-image:linear-gradient(45deg, #77aa82, #d5f3dd); border-left:0; }
ul#menu-header li.clients a { color:#141319; display:block; margin:0; padding:1rem 2rem; font-weight:400; }
ul#menu-header li.clients a:hover, ul#menu-header li.clients a.on { color:#141319; }


#nav-home, #nav-button, #nav-toggle { display:none; }

ul#menu-parallax { position: fixed; right:2%; top:46%; list-style:none; z-index:100000; }
a.bullet { display: block; width: 15px; height: 15px; margin-bottom:15px;background: url('https://www.lesjardinsdematthieu.fr/_chartes_/jardins-matthieu/ressources/images/bullets.png') no-repeat top left ; }
a.bullet:hover, a.bullet.on { background-position: bottom left; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* CONTENU */

main { margin:0; padding:0; background-color:#dfdfdf; }
main.headerpadding { padding-top:47rem; transition: all 0.3s linear; }
body.scroll main.headerpadding { padding-top:16rem; transition: all 0.3s linear; }
body.scroll .interne main.headerpadding, .interne main.headerpadding { padding-top:10rem; transition: all 0.3s linear; }

h1, h2, h3 { margin:0; padding:0; text-align:left; text-transform:none; font-weight:200; }
h1 { font-size:2rem; }
h2 { font-size:2rem; }
h3 { font-size:1.6rem; }

section, aside { position:relative; margin:0; padding:0; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* ACCUEIL */

section { background-color:#363636; color:#d1d1d1; }
section h1, aside h1 { padding:3rem 8rem; font-size:3rem; }
section h2, aside h2 { padding:3rem 8rem; font-size:3rem; }
section .contenu, aside .contenu { padding:1rem 8rem 4rem 18rem; font-size:1.4rem; }
section .visuel { transition: none; position:relative; width:100%; height:0; padding-bottom:35%; background-color:#262626; background-image:none; background-size:100%; background-position:0 0; background-repeat: no-repeat; background-clip:border-box; }
section .visuel:after { content:""; position:absolute; left:50%; transform:translateX(-50%); top:0; height:0; width:0; border:4rem solid transparent; border-top-color:#363636; }
section .parallax { position:relative; width:100%; height:0; background-size:100%; background-position:center center; background-repeat: no-repeat; background-clip:border-box; background-image:none; background-attachment:fixed; padding-bottom:10%; }
aside .fixe { position:relative; width:100%; height:0; background-size:100%; background-position:center top; background-repeat: no-repeat; background-clip:border-box; background-image:none; background-attachment:normal; padding-bottom:3%; }

section.nous { background-color:#dfdfdf; color:#737373; }
section.nous .visuel:after { border-top-color:#dfdfdf; }
section.nous h2 { font-weight:600; color:#48744d; }

section.realisations { background-color:#262626; color:#f4f4f4; padding-bottom:2rem; }
section.conseils { background-color:#dfdfdf; color:#737373; }
section.conseils .parallax { padding-bottom:4%; }
aside.clients { background-color:#cacc46; color:#262626; padding-bottom:1px; }
aside.clients h2 { color:#ffffff; }

.rslides_container { float:none; width:100%; margin:0 auto 0 auto; background-color:#000; }
#slider_realisations { width:73%; margin-bottom:4rem; }

#slider_client .rslides li { height:50rem; position:relative; }
#slider_client .rslides li img { position:absolute; top:50%; transform:  translateX(-50%) translateY(-50%); left:50%; max-height:50rem; max-width:100%; height:auto; width:auto; float:none; }

.rslides_tabs { padding:0; margin:1rem 0 0 0; }
.rslides_tabs li {
    display: inline;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
}
.rslides_tabs a {
	width: 15px; height: 15px; margin-bottom:15px; background: transparent url('https://www.lesjardinsdematthieu.fr/_chartes_/jardins-matthieu/ressources/images/bullets.png') no-repeat top left ;
    border-radius: 0;
    box-shadow: 0;
    display: inline-block;
    overflow: hidden;
    text-indent: -9999px;
	transition:none;
}
	
.rslides_here a {
	width: 15px; height: 15px; margin-bottom:15px; background: transparent url('https://www.lesjardinsdematthieu.fr/_chartes_/jardins-matthieu/ressources/images/bullets.png') no-repeat bottom left ;
	-webkit-transform: none;
	-moz-transform: none; 
	-o-transform: none;
	-ms-transform: none;
	transform:none;
	transition:none;
}
	

section.conseils h1 { padding-bottom:1.5rem; }
section.conseils h1 span { display:block; }
section.conseils span.date { display:block; font-size:0.8em; padding-bottom:1.5rem; }
section.conseils div.date { font-size:0.8em; padding-bottom:1rem; }
section.conseils .date { color:#b4a608; }
section.conseils ul { display:block; padding:0; margin:0; }
section.conseils li { display:block; border-bottom:1px solid #5f744d; margin-bottom:2rem; padding-bottom:0.5rem; }
section.conseils li h3 { color:#5f744d; padding-bottom:0.5rem; font-weight:400; }
section.conseils li a { display:inline-block; width:auto; color:#5f744d; padding-top:1rem; font-weight:400; font-style:italic; }
section.conseils li a:hover {  color:#b4a608; text-decoration:none; }

section.conseils a.tous { text-align:right; font-weight:400; display:inline-block; float:right; }
section.conseils a.tous:hover { text-decoration:none; }
section.conseils { padding-bottom:4rem; }

section.conseils .detail { display:block; border-bottom:1px solid #5f744d; margin-bottom:2rem; padding-bottom:0.5rem; }

section.conseils .pages { display:block; text-align:right; font-weight:100; margin:0; padding:0.5rem 0 0 0; width:auto; line-height:1em; }
section.conseils .pages .currentpage { display:inline-block; width:1.5em; text-align:right; }
section.conseils .pages .totalpages { display:inline-block; width:1.5em; text-align:left; }
section.conseils .pages a { margin:0 1rem; padding:0; width:auto; color: #5f744d; font-weight:400; }
section.conseils .pages a.inactive { opacity:0.2; cursor:text; }
section.conseils .pages a.last { margin-right:0; }
section.conseils .pages a:hover { text-decoration:none; }

/* CLIENTS */
#div-logout { text-align:right; }
#div-logout a { clear:both; width:auto; padding-top:0.5rem; font-family:'Cantata One', serif; font-size:1rem; font-style:italic; opacity:0.7; }

#tabs { width: 100% !important; padding:0 !important; margin: 4rem auto 4rem auto !important; }
#tabs > ul { height:4em; padding:0 !important; margin: 0 !important; }
#tabs > ul > li { float: left; padding:0 !important; margin: 0 0.2rem 0 0 !important; }
#tabs > ul > li a { display: block; text-decoration: none; padding: 1.4rem 3rem; background-color:#48744d; color:#ffffff; }
#tabs > ul > li a:hover {  background-color:#5f9764; }
#tabs .ui-tabs-active a { background-color:#ffffff !important; color:#48744d !important; }
#tabs .ui-tabs-active a:hover { background-color:#ffffff !important; }

.ui-tabs .ui-tabs-nav li {
    list-style: none;
    float: left;
    position: relative;
    top: 0;
    margin: 1px .2em 0 0;
    border-bottom-width: 0;
    padding: 0;
    white-space: nowrap;
}

#tabs_container { padding: 0; margin:0; overflow: hidden; position: relative; background-color:#ffffff; }
#tabs_container > div { min-height:50rem; }
#tabs_container iframe { width:100%; height:47rem; overflow:hidden; border:0; }

#tabs_container a.adminclients { display:inline-block; margin:0 25%; width:auto; }

#tabs_container h3 { text-align:center; margin:2rem 0; text-transform:uppercase; }
#tabs_container .retour { text-align:center; }
#tabs_container .contenu { padding:1rem 25% 4rem 25%; font-size:1.4rem; }

/* CHANGE PWD */
#tabs_container form { width:100%; margin:0; padding:0; }
#tabs_container form label { width:100%; margin:0; padding:0; }
#tabs_container form label span { display:block; text-transform:none; height:2.5rem; padding-top:0.5rem; font-size:1.1rem; }
#tabs_container form label input { background-color:#5f9764; height:3rem; }
#tabs_container form button { background-color:#e5e757; color:#5f9764; height:5rem; margin-top:2.5rem; margin-right:0; width:100%; }
#tabs_container form a { clear:both; width:auto; padding-top:0.5rem; font-family:'Cantata One', serif; font-size:1rem; font-style:italic; opacity:0.7; }

.dropzone {
    background: #e5e757 none repeat scroll 0 0;
    border: 3px dashed #5f9764;
	color:#5f9764;
}

/*-----------------*/
/* ACTUS */
section.actualite { background-color:#fff; color:#737373; }

section.actualite .fetchrss { position:relative; margin-top:0; padding:0 0 2rem 0; text-align:center; vertical-align:top; font-size:0; }
section.actualite .post { position:relative; width:27.33%; display:inline-block; margin:0 2% 2rem 2%; padding:0; overflow:hidden; vertical-align:top; border:1px solid #ccc; background-color:#fff; }
section.actualite .post video { width:100%; margin:0; padding:0; }
section.actualite .post div.fbvisuel { position:relative; width:100%; height:0; margin:0; padding:0; padding-bottom:100%; background:transparent center no-repeat; background-size:contain; }
section.actualite .post p { position:relative; width:auto; font-family: Helvetica,Arial,sans-serif; font-size:0.9rem; margin:0; padding:1rem; color:#1f1f1f; }
section.actualite .post p .copyrightfetchrss { position:absolute; display:block; bottom:0; right:1rem; font-size:0.6em; color: #ccc; }
section.actualite .post p.pubdate { margin:0 1rem; padding:1rem 0; border-top:1px solid #ccc; }
section.actualite .post a.postlink { position:absolute; margin:0; padding:0; right:1rem; bottom:0; display:block; width:auto; }
section.actualite .post a.postlink span { position:relative; display:inline-block; width:2rem; height:2rem; text-align:center; margin:0 0 0.7rem 0; padding:0; }
section.actualite .post a.postlink span img { position:relative; width:100%; }
section.actualite .post a.postlink span svg { position:relative; width:100%; height:100%; }

section.actualite .post:nth-child(3n+2) { display:inline-block; }


/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* RDV */
.interne main { background-color:#dfdfdf;  }

#rdv form { margin:0; padding:0; text-align:left; }
#rdv h2 { padding-left:1%; }
#rdv label { float:left; display:inline-block; width:100%; position:relative; vertical-align:top; margin:0; padding:0 1%; }
#rdv label span { display:inline-block; padding-left:0.5rem; padding-top:0.5rem; padding-bottom:0.5rem; text-transform:uppercase; }
#rdv label.half { width:50%;  }
#rdv label.option { width:auto; }
#rdv select { clear:both; font-size:1.2rem; width:100%; margin-bottom:0.5rem; height:3em; }
#rdv select option:first-of-type { color:#fff; }
#rdv input { clear:both; font-size:1.2rem; width:100%; margin-bottom:0.5rem; height:3em; border-radius:0 !important; }
#rdv textarea { height:10em; }
#rdv button { margin:2rem 1% 0 1%; width:auto; }
#rdv .reponse.succes { padding:5rem 0 20rem 0; }
#rdv form:after { content:''; clear:both; display:table; }
#rdv .asterisque { padding-left:1.5%; padding-top:0.5rem; font-size:0.9rem; }

#rdv-daterdv { background:#5f9764 url(../../_chartes_/jardins-matthieu/ressources/images/calendar.png) right center no-repeat !important; padding-right:30px !important; }
#rdv-daterdv::placeholder { opacity:1; color:#fff; }
#rdv-daterdv::-ms-input-placeholder { opacity:1; color:#fff; }

#rdv-heurerdv { background:#5f9764 url(../../_chartes_/jardins-matthieu/ressources/images/timer.png) right center no-repeat !important; padding-right:30px !important; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
.page-interne { background-color:#dfdfdf; color:#737373; min-height:100px; padding-bottom:3rem; }
.page-interne h1 { font-size:3rem; padding-top:2rem; padding-left:0; }
.page-interne h2 { font-size:2.4rem; padding-left:0; }
.page-interne div { padding:0; }
.page-interne p a { font-weight:400; }
.page-interne p a:hover { text-decoration:underline; }

/*----------------------------------------------------------------------------------------------------------------------------------------------*/
/* FOOTER */

footer { font-size:1.5rem; position:relative; z-index:120; margin:0; padding:1em 0 1em 0; background-color:#48744d; color:#d4d4d4; }
footer h2 { padding:0 0 2rem 0; text-align:left; color:#f3c5f0; font-size:2.4rem; }
footer h2.rdv { clear:both; padding:0 0 2rem 1%; }
footer div.explications { font-size:1.3rem; padding-left:1%; padding-bottom:0.5rem; }
footer a.rdv-button { clear:both; margin:0 1% 5rem 1%; width:98%; }

a.nav-top { font-size:1.2rem; font-style:italic; font-family:'Cantata One', serif; width:3.5rem; height:3.5rem; z-index:200; display:block; position:relative; top:-3.2rem; margin:0 auto; padding:1rem 0.2rem 0 0; background-color:#cacc46; border-radius:50%; color:#ffffff; text-align:center; }
a.nav-top:hover { text-decoration:none; }

.colonne { display:inline-block; width:50%; position:relative; vertical-align:top; text-align:left; padding:1rem 0 0 0; }
.colonne:first-child { padding-right:3rem; }
.colonne:last-child { padding-left:0; }

#coordonnees .identification { padding-bottom:0.5rem; font-weight:600; }
#coordonnees .adresse { padding-bottom:2rem; }
#coordonnees .telephone a, #coordonnees .telephone a:visited, #coordonnees .telephone a:active, #coordonnees .telephone a:link, #coordonnees .telephone a:hover { text-decoration:none; }
#coordonnees .email a, #coordonnees .email a:visited, #coordonnees .email a:active, #coordonnees .email a:link, #coordonnees .email a:hover { text-decoration:none; }

#nous-contacter form { margin:0; padding:0; }
#nous-contacter h2 { padding-left:1%; }
#nous-contacter label { float:left; display:inline-block; width:100%; position:relative; vertical-align:top; margin:0; padding:0 1%; }
#nous-contacter label span { padding-left:0.5rem; }
#nous-contacter label.half { width:50%;  }
#nous-contacter label.option { width:auto; }
#nous-contacter input { clear:both; font-size:1.2rem; width:100%; margin-bottom:0.5rem; height:2.6em; }
#nous-contacter button { margin:2rem 1% 0 1%; width:98%; }
#nous-contacter .reponse.succes { padding:5rem 0 20rem 0; }
#nous-contacter form:after { content:''; clear:both; display:table; }
#nous-contacter .asterisque { padding-left:0.5rem; }


#sociaux { display:block; float:left; color:#d4d4d4; margin: 4rem 0 0 0; padding:0; vertical-align:top; }
#sociaux li { display:block; float:left; margin:0.1em 0 0.3em 1em; list-style-type:none; padding:0; }
#sociaux li:first-child { margin-left:0; }
#sociaux li a { display:block; padding:0.1em 0.3em 0.1em 0.3em; width:1.7em; height:1.7em; border:1px solid #d4d4d4; border-radius:15%; }
#sociaux li a { color:#d4d4d4; text-decoration:none; font-size:1.8rem; }
#sociaux li:not(.facebook) a { text-align:center; }
#sociaux li a:hover { background-color:#d4d4d4; color:#48744d; text-decoration:none; }

#webdesign { display:block; position:absolute; margin:0; padding:0; left:0; bottom:0; padding-bottom:5%; width:15%; height:0; transition: all 0.3s linear; }
#webdesign img { display:block; margin:0; padding:0; position:relative; width:100%; transition: all 0.3s linear; }
#webdesign:after { content:""; display:table; clear:both; }

#copyright { font-size:1rem; font-family:'Cantata One', serif; display:block; clear:both; color:#ffffff; margin:0; padding:8em 0 1em 0; font-style:italic; text-align:right; font-weight:normal; }


/* DEBUG */
#liste-debug { background-color:#222; color:#ddd; text-align:left; font-size:0.8rem; padding:2em; border-top:4px dashed #ddd; }
#liste-debug .debug, #liste-debug pre { font-size:0.8rem; background-color:transparent; color:#ddd; border-color:#555; }

/* AUTH */
#div-login { width:100%; margin:0; padding:0; }
#div-login .colonne { width:50%; margin:0; padding:0; padding-right:2rem; }
#div-login label { width:100%; margin:0; padding:0; }
#div-login label span { display:block; color:#ffffff; text-transform:uppercase; height:2.5rem; padding-top:0.5rem; }
#div-login label input { background-color:#e5e757; height:3rem; }
#div-login button { background-color:#47aa53; height:8.5rem; margin-top:2.5rem; margin-right:30%; width:70%; }
#div-login a { clear:both; width:auto; padding-top:0.5rem; font-family:'Cantata One', serif; font-size:1rem; font-style:italic; opacity:0.7; }


/* ------------------------------------------------------------------------------------------------------------- */
/* RESPONSIVE */

.liquide { width:90%; }
html { font-size:10px; font-size:1vw; }

/* Fixe la largeur maxi d'affichage 1200 = 0.9*1333 */
@media (min-width:1333px) { 

	.liquide { width:1200px; }
	html { font-size:13.33px; }
	.litebox-overlay .litebox-container { width:1200px; margin-left:auto; margin-right:auto; }
	.litebox-overlay .litebox-inline-html { width:960px; }

}

/* Affichage Mobile */
@media (orientation:portrait) and (max-width:800px), (max-width:500px) {

	html { font-size:24px; font-size:3vw; }
	.liquide { width:90%; }

	a.ancre { top:-10rem !important; }

	div.nosmartphone br { display: none; content: ' '; clear:none; }

	header, #headercontact .liquide { font-size:1.1rem; }

	header .liquide { overflow:visible; width:100%; transition: all 0.5s linear; }
	#nav-button { font-size:3rem; cursor:pointer; display:block; color:#ffffff; position:fixed; right:1rem; bottom:0; top:0.3rem; transition: all 0.5s linear; }

	header #monogramme { width:80%; padding-bottom:56%; }
	header #monogramme img { padding-top:15%; }
	header #prix { width:50%; padding-bottom:90%; }
	header #prix img { padding-top:0; }

	header #logo { width:25%; }
	header #logo img { padding:0.3rem 1rem; }
	body.scroll header #logo, .interne header #logo { padding-bottom:3.6rem; }


	nav { height:3.6rem; }

	ul#menu-header { z-index:10000; height:0; overflow:hidden; background-color:#48744d; color:#ffffff; position:fixed; top:3.6rem; width:100%; left:0; transition: all 0.5s linear; }
	#nav-toggle:checked ~ #menu-header { height:auto; transition: all 0.5s linear; }
	ul#menu-header li { display:block; width:100%; padding:0 1em; text-align:center; }
	ul#menu-header li:first-child { padding-left:1em; }
	ul#menu-header li a { display:block; padding:1em; color:#ffffff; font-size:1.6rem; }
	ul#menu-header.current a, ul#menu-header li.current a:link, ul#menu-header li.current a:active, ul#menu-header li.current a:visited { color:#fbff00; }
	ul#menu-header li a:hover { text-decoration:none; }
	ul#menu-header li:after { content:''; margin:0 auto 0 auto; display:block; width:100%; height:1px; background-image:radial-gradient(#999999,#48744d); }

	ul#menu-header li.clients { display:block; width:100%; padding:0 1em; text-align:center; position:relative; left:0; top:0; background-color:transparent; border-radius:0; transform: none; transform-origin: top left; text-transform:uppercase; background-image:none; }
	ul#menu-header li.clients a { color:#ffffff; padding:1em; font-weight:200; }
	ul#menu-header li.clients a:hover, ul#menu-header li.clients a.on { color:#fbff00; }

	main.headerpadding { padding-top:50rem; }
	body.scroll main.headerpadding, .interne main.headerpadding { padding-top:5rem; }

body.scroll header #monogramme, .interne header #monogramme {  padding-bottom:0; opacity:0; transition: all 0.3s linear; }
body.scroll header #prix, .interne header #prix {  padding-bottom:0; opacity:0; transition: all 0.3s linear; }
.interne header #monogramme { display:none; }
.interne header #prix { display:none; }

	h1 { text-align:center; font-size:3rem; }
	h2 { text-align:center; font-size:3rem; }
	h3 { text-align:center; }

	.page-interne .texte { padding:0; }

	section h1, aside h1 { padding:2rem 0; font-size:2.6rem; }
	section h2, aside h2 { padding:2rem 0; font-size:2.6rem; }
	section .contenu, aside .contenu { padding:1rem 0 4rem 0; font-size:1.4rem; }
	section p, aside p { text-align:justify; }
	section .visuel:after { border-width:1.5rem; }
	section .parallax { display:none; }

	section.conseils h3 { font-size:2.3rem; text-align:left; }
	
	.rslides_container { width:100%; }
	.rslides_tabs a {
		width: 15px; height: 15px; margin-bottom:15px; background: url('https://www.lesjardinsdematthieu.fr/_chartes_/jardins-matthieu/ressources/images/bullets.png') no-repeat top left ;
	}
	
	.rslides_here a {
		width: 15px; height: 15px; margin-bottom:15px; background: url('https://www.lesjardinsdematthieu.fr/_chartes_/jardins-matthieu/ressources/images/bullets.png') no-repeat bottom left ;
	}
	ul#menu-parallax { display:none; }

	section.actualite h2 { font-size:3.2rem; }
	section.actualite .post { width:100%; margin-left:0; margin-right:0; }
	section.actualite .post p { font-size:1.8rem; }
	section.actualite .post a.postlink span {width:2.5rem; height:2.5rem; margin:0 0 1.2rem 0; }

	#tabs > ul > li a { padding: 1rem 1.2rem; font-size:1rem; }
	
	footer h2 { text-align:center; }

	.colonne { width:100%; }
	.colonne:first-child { padding-right:0; }

	#coordonnees { text-align:center; margin-bottom:5rem; }

	footer div.explications { text-align:center; }

	#nous-contacter label span { font-size:2rem; }
	#nous-contacter label.half { width:100%; }

	#rdv label.half { width:100%; }
	#rdv input, #rdv select { height:2em; }
	#rdv button { width:100%; }

	#nous-contacter .reponse { margin:0 5%; }
	#nous-contacter .reponse.succes { font-size:1.4rem; padding:5rem 0 5rem 0; }
	#nous-contacter .reponse.erreur { font-size:1.6rem; padding:0.5rem 0 1rem 0; }
	#nous-contacter .reponse li { font-size:0.8rem; margin:0; padding:0; text-align:left; }

	#div-login .colonne { width:100%; margin:0; padding:0; padding-right:0; text-align:center; }
	#div-login p { text-align:center; }
	#div-login button {margin-right:0; width:100%; }

	footer li { list-style-type:none; display:block; width:100%; text-align:center; clear:both; float:none; margin:0; padding:0; padding-bottom:1em; }
	#sociaux { clear:both; float:none; width:auto; text-align:center; margin:0; padding:2em 0; }
	#sociaux li { float:none; display:inline-block; width:auto; padding-bottom:0; }
	#copyright { position:relative; clear:both; float:none; width:100%; text-align:center; padding-top:4rem; }
	#webdesign { position:relative; clear:both; float:none; padding-bottom:10%; width:30%; margin:3em auto 0 auto; text-align:center; }
	#sociaux:after, #outils:after, #menu-footer:after { content:''; clear:both; display:table; }

	/* Pour éviter un zoom sur l'iphone qd on clique sur un champ de saisie */
	@media screen and (-webkit-min-device-pixel-ratio:0) { 
		textarea,input,select { font-size: 16px !important; padding:0 5px !important; line-height:20px !important; }
		input,select { height:28px !important; }
	}

}