/* COULEURs FERME DES LAMAS : 
MARRON : #786748  
JAUNE : #d7b255
BEIGE : #f1eee9
*/



/* ---------------- GÉNÉRAL ---------------- */
body {font-family:"lato"; font-size: 16px; background-color: #f1eee9; background-image: url("../img/lama-fond.png"); background-repeat: no-repeat; }
h1 {font-family:'nanum-pen';color:#7f7f7f; font-size:3.7em; text-transform: uppercase; line-height: 1em}
h2{font-family:'nanum-pen'; font-size: 2.5em; color:#d7b255; text-transform: uppercase}
h3{font-family:'nanum-pen'; font-size: 2.2em; color:#d7b255; text-transform: uppercase}
.row{margin:0}
p{color:#656565; font-weight: 400}
.brown{color:#786748}
#spip-admin {right:60%}
a:hover, a {color:#d7b255}


/* ---------------- BOUTONS ---------------- */
.boutonRose {border:2px solid #d7b255;background-color:#d7b255; border-radius: 3px; color:white; margin-top:20px; padding:10px 8%;text-transform: uppercase; font-weight: bold; letter-spacing: 0.1em; transition-duration: 0.3s}
.boutonRose:hover{color:#786748; background-color: transparent; transition-duration: 0.3s}

/* ----------------- TOPBAR -----------------------------  */
.topBar a {color:white}
.topBar a:hover {color:white}
.topBar p {text-align: right; margin: 0;font-family:'nanum-pen'; font-size: 1.3em; color:#786748; text-transform: uppercase }
.topBar {background-color: #f1eee9; color:white; padding: 10px}
.topBar .col{display: flex}
.topBar .formulaire_spip {display:inline-block; margin-left: 50px}
.formulaire_spip label {display: none}
#formulaire_recherche .editer-groupe {display: flex}
.drapeauxEtRecherche #formulaire_recherche input#recherche {height:34px;max-width:150px; border: 3px solid white; border-right: none;}
#formulaire_recherche input[type="submit"]{border:0;border-left:0px;padding:4px;width:28px;background-image: url(../img/loupe.png); color:transparent}
.FormulaireRechercheRespNav #formulaire_recherche input[type="submit"]{border:1px solid #d7b255;border-left:0px;padding:4px;width:28px;background-image: url(../img/loupe.png); color:transparent}
.topBar a > img {margin-left: 20px}
.adresse {display: inline-flex; margin-left: 145px}
.fb{margin-right: 15px}


/* ----------------- NAVIGATION PRINCIPALE -----------------------------  */
.bg-light {margin: auto; background-color: white!important}
.row.nav {background-color:white}
.logoSite {margin-right: 45px; height: 80px}
.logoSite img {margin-top: -62px}
#contactezNous {background-color:#d7b255; border-radius: 3px; color:white; margin-left: 20px;}
.dropdown-toggle::after {display:none}
.dropdown-toggle, #contactAlone, #contactezNous{text-transform: uppercase; }
nav, .dropdown-menu {font-size: 14px}
/* BLOCS ADRESSE ET LIENS FB + DRAPEAUX DANS DROP DOWN RESPONSIVE MENU*/
.blocNavRespAdresse {border-top: 1px solid #d7b255; padding: 15px 0; margin-top: 10px}
.blocNavRespAdresse p{margin-bottom: 0}
.blocNavRespLiens { border-top: 1px solid #d7b255; border-bottom: 1px solid #d7b255; display: flex; justify-content: space-between; padding: 15px 0}
.FormulaireRechercheRespNav #formulaire_recherche input#recherche {height:34px;width:100%; border: 1px solid #d7b255; border-right: none;background-color: #ececec}
.FormulaireRechercheRespNav {padding: 15px 0; margin-top: 10px}
.FormulaireRechercheRespNav span{font-family: "lato"; color: #656565}
/* Changer la couleur de fond du lien quand on clique dessus - bleu par défaut*/
.dropdown-item.active, .dropdown-item:active {background-color: #d7b255;}



/* ---------------- CARROUSEL ---------------- */
.texteCarrousel{position:absolute; top:22%; max-width:50%;}
.texteCarrousel p{color:#656565;font-weight: 200;}
.texteCarrousel .boutonRose{position: absolute; text-decoration: none}
.sousTitreCarrousel {font-family: "lato"; font-size:2em; color: #d7b255;}


/* ---------------- BLOC LAURENCE ET EDUARDO ---------------- */
.laurenceEduardo{background-color: white; padding: 20px}
.laurenceEduardo{text-align: center;padding: 20px 40px; position: relative; z-index: 0;}


/* ---------------- BLOC BOX HOME ---------------- */
.gridBlocBoxes {margin-top:40px;display:flex}
.gridBlocBoxes a{text-decoration: none}
.colonneMilieu {width:60%; margin: 0 5px}
.colonneDroite {width:40%; margin: 0 0 0 5px}
.rowGauche {display: flex; margin-bottom: 10px}
.hoverBack {background-size: 100%; background-position: center; transition-duration: 0.3s}
.hoverBack:hover {background-size: 125%; transition-duration: 0.3s}
.rowMilieu {height: 97.5%; display: flex;  margin-bottom: 10px}
.rowDroite {display: flex; margin-bottom: 10px}
.rowDroiteBlocGauche {width: 50%;display: flex; margin-right: 5px}
.rowDroiteBlocDroite {width: 50%; display: flex; margin-left: 5px}
.textRowGauche {margin: auto; text-align: center;padding:20%; height: 100%; width: 100%}
.textRowMilieu {margin: auto;text-align: center;padding:28% 20%; height: 100%; width: 100%}
.textRowDroite {margin: auto;text-align: center; padding:17% 10%; height: 100%; width: 100% }
.textRowDroiteBas {margin: auto;text-align: center; padding:34% 10%; height: 100%; width: 100% }
/*.redBackground {background-color: rgba(161,1,123,0.8); transition-duration: 0.3s}
.redBackground:hover {background-color: rgba(161,1,123,0); transition-duration: 0.3s}*/
.redBackground:hover a{text-shadow: 1px 1px 2px black; }
.titreBloc {color: white; text-transform: uppercase;margin: auto; font-family:'nanum-pen'; font-size: 2em; line-height: 0.7em}


/*--------------------------VIDEO---------------------------*/
.video-responsive { overflow:hidden; padding-bottom:56.25%; position:relative; height:0}
.video-responsive iframe {left:0; top:0; height:100%;width:100%;position:absolute;}
.titreVideo h2{text-align: center; margin-top: 50px}

/* ---------------- FORMULAIRE RAPPEL ----------------  */
.fenetrerappel{position: fixed;z-index:1; display: flex; font-family:'lato'; top:20%}
.fenetrerappel{left:-300px; transition-duration: 1s}
.fenetrerappel.open{left:0; transition-duration: 1s}
.formulaireRappel {color:white}
.rappel{background-color:#d7b255; font-size: 15px; max-width: 300px}
.rappel label{display: none}
.rappel form{padding:20px 20px 0 20px}
.rappel input{max-width: 100%; margin-bottom: 15px; border:2px solid white; border-radius: 3px; padding:5px 10px}
.rappel textarea{max-width: 100%; margin-bottom: 15px; border:2px solid white; border-radius: 3px; padding:5px 10px}
.rappel .submit {background-color: transparent; border: 2px solid white; color:white; padding: 5px 20px; width: 100%; border-radius: 3px; text-transform: uppercase}
.mentionsLegalesForm {color:white; font-size:10px; padding: 0 20px}
.mentionsLegalesForm p{color:white}
.etreRappele {text-align: center; padding:30px 20px; background-color: #d7b255; border-radius: 0px 3px 3px 0; cursor: pointer;}
.texteIconeRappel { margin-top: 10px; cursor: pointer;}
.boutonRappel {background-color: transparent; border:none; color: white; text-transform: uppercase; font-size: 16px; font-weight: 600; line-height: 1.1em;cursor: pointer;}
#rappelResponsive {display: none}



/* ---------------- FORMULAIRE DE CONTACT ----------------  */
.formulaire_contact_lama .editer-groupe div{margin:10px auto}
.formulaire_contact_lama  {padding: 2% 20% 2% 20%;margin: auto; background-color: #f1eee9}
.formulaire_contact_lama  input {width:100%;  padding: 4px 16px;border-radius: 4px;border: 1px solid #fff;color:#495057}
.formulaire_contact_lama  .submit {width:30%; padding: 4px 16px;border-radius: 4px;color: white; font-family:'nanum-pen'; font-size: 1.5em; background-color: #d7b255;border: 1px solid #d7b255; text-transform: uppercase}
.formulaire_contact_lama textarea {width:100%; padding: 4px 16px;border-radius: 4px;border: 1px solid #fff}
.custom-select select {display: none;}
.select-selected:after {position: absolute;content: "";top: 14px;right: 10px;width: 0;height: 0; border: 6px solid transparent;border-color: #fff transparent transparent transparent;}
.select-selected.select-arrow-active:after {border-color: transparent transparent #fff transparent;top: 7px;}
.select-items div,.select-selected {color: #ffffff;padding: 8px 16px;border: 1px solid transparent;border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;cursor: pointer;}
.select-items {position: absolute;top: 100%;left: 0;right: 0;z-index: 99;}
.select-hide {display: none;}
.select-items div:hover, .same-as-selected {background-color: rgba(0, 0, 0, 0.1);}
.formulaireContact {background-color: #ddd; padding:20px}
.showLabel label {display: block}
.editer.showLabel { font-size:1.2em; color: #d7b255;text-align: center; margin-bottom: 15px}
.formulaire_contact_lama .checkbox {width:5%; margin: 9px}
.choix.showLabel {display: flex; font-size: 0.9em; font-weight: bold; color: #786748}
.mentionsLegForm {font-size: 0.8em; color: #d7b255; text-transform: uppercase}
.mentionsLegForm p{text-transform: none}
.ligneFinArticle{margin-top:25px}

/* ---------------- ACTUS ----------------  */
.actualites {background-color: #786748; margin-top:-30px; background-image: url("../img/lama-fond.png"); background-position: right; background-repeat: no-repeat}
.titreActualites h2 {text-align: center; color:white;margin-bottom: 20px}
.actualites {padding-bottom: 50px;}
.actualites .container{margin-top:110px;}
.articlesActu {display: flex}
.actuPrincipale {-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);margin-bottom: 10px; background-color: white}
.datePublication {font-size: 10px; font-style: italic; color: #656565}
.articlesActu h3{text-transform: uppercase; line-height: 1em}
.articlesActu a{text-decoration: none}
.articlesActu p{margin-top: 20px}
.blocExtraitArticleUne {background-color: white; padding: 20px 30px 20px 30px}
.blocActuPetit {display: flex; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.8);margin-bottom: 10px; min-height: 183px}
.blocExtraitArticlePetit {background-color: white; padding: 29px 20px 10px 20px; width: 65%}
.blocExtraitArticlePetit h3{font-size:2em;}
.blocExtraitArticlePetit p{margin-top: 12px}
.imageArticlePetit {width:45%; background-size: cover; background-repeat: no-repeat; background-position: center}
.imageArticleUne {width: 100%; height: 185px; background-repeat: no-repeat; background-size: cover;background-position: center}


/* ---------------- QUALTIÉ OUTDOOR ----------------  */
.titreOutdoor {color: #656565; text-align: center; margin: 30px}
.qualiteOutdoorTexte {background-color: white}
.qualiteOutdoorTexte .container {display: flex}
.texteOutdoor p {text-align: center}
.texteOutdoor {margin: auto}
.logoOutdoor {margin: 20px 0}

/* ---------------- AGRICULTURE BIO BLOC ----------------  */
.titreBio {color: #656565; text-align: center; margin: 30px}
.agriBioTexte {background-color: white}
.agriBioTexte .container {display: flex; margin: 20px auto}
.texteBio p {text-align: center}
.texteBio {margin: auto}
.logoBio {margin: 20px 0}

/* ---------------- BLOC LAMAS VENTE ----------------  */
.blocLamaVente {border-top: 2px dotted #d7b255; padding: 15px 0;}
.descriptionLamaVente {margin : 1% 2%}

/* ---------------- FOOTER ----------------  */
.container.footer{display: flex; font-size: 15px; font-weight: 400; padding-top:30px}
.footer .col-4{margin-top:30px}
.footer{background-color: #d7b255; color:white; }
.NavBas li {color: white; list-style: none}
.NavBas li a {color: white}
.FooterGrid {padding-left:50px; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; width: 100%}
.titreNavBas {text-transform: uppercase; border-bottom: 2px solid white; width:100%; margin-bottom: 15px; font-size: 17px}
.colophon {font-family: 'lato'; text-transform: uppercase; color: white; font-size: 13px; text-align: center; padding: 50px 0 20px 0}
.colophon a{color: white}
.rowAgences {background-color: #404040}
.col20prct{width:16.6%; margin:15px}
.logosPied {margin: auto; padding-top:40px}
.logoLamasPied {margin: auto}
#BoutonPartenaires h2{background-color:#786748; border-radius: 3px; color:white; margin-left: 20px; font-size: 2em;padding: 5px 35px;margin-top: 30px}
#BoutonPartenaires h2:hover{text-decoration: none; color:#d7b255}
#BoutonPartenaires a{text-decoration: none !important}
.boutonPartenaire {margin: auto; padding-bottom: 20px}


/* ---------------- FIL D'ARIANE ----------------  */
.arbo{border-bottom: 1px solid #d7b255;padding: 10px;}
.arbo a {color:#d7b255}
.arbo a:hover {color:#786748}

/* ---------------- ARTICLES ----------------  */
.enteteArticle{background-repeat: no-repeat;background-size: cover; height: 300px; background-position: center;}
.carrouselBlogDroit {width: 50%; padding: 5% 10%; background: linear-gradient(to right, rgba(0,0,0,.6), transparent); height: 100%}
.carrouselBlogDroit h1{font-family:"lato";text-transform: uppercase;font-size: 29px;color:white;padding-bottom: 10px;}
.carrouselBlogDroit p{color:white}
.containerGlobal {max-width: 1200px; display: flex; margin: auto}
.containerChapeau{width:70%; margin:-30px auto 30px auto;padding:1% 2%; -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);  background-color: white}
.contenuArticle{padding:2%}
.contenuArticle h2>p{color: black; margin-bottom: 1.4em; font-size:1rem; font-weight: bolder}
.contenuArticle.rubrique p,ul{font-size:15px; padding-left:0}
.contenuArticle ul{margin-left:30px;color:#444}
.contenuArticle p{color:#656565}
.accrocheArticle p{color: #d7b255; font-size: 1.8em; line-height: 1em}
.chapoArticle p{color: #786748; font-weight: bold; margin-top: 15px; font-size: 1.1em}
.texteArticle h3{font-family:"lato"; color: #786748; font-weight: bold; margin-top: 15px; font-size: 1.1em; text-transform: none; line-height: 2.5em}
.texteArticle .spip_documents_center {display: flex}
.texteArticle .spip_documents_center img{margin: auto; max-width: 100%; height: auto}
.texteArticle .spip_documents_left {display: block}
.texteArticle .spip_documents_left img{max-width: 100%; height: auto}
.texteArticle table {width: 100%}
.texteArticle tr, td, table {border-color:#d7b255; padding: 0 10px; color: #656565}
.texteArticle tr:nth-child(even) {background: #f1eee9}


/* ---------------- ASIDE ----------------  */
.asideCol {height: 100%; width: 25%; }
.aside {margin:-30px auto 20px auto;padding:2% 2% 10% 2%; background-color: #ffffff; color: #656565;-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1)}
.TitreActuAside {padding-top: 15px}
.aside h2 {text-transform: uppercase; text-align: center; font-size:2em}
.aside p {margin-bottom: 0px}
.aside p:last-child {font-size:14px; color:#656565; line-height: 1.2em}
.afficheActus {border-top:1px solid white;  padding:10px 5px}
.blocExtraitArticlePetitSide {background-color: white; padding:15px 10px 10px 10px;}
.blocExtraitArticlePetitSide h3{text-transform: uppercase; font-size:1.5em; color:#d7b255;margin-bottom: 0}
.blocExtraitArticlePetitSide a:hover{text-decoration: underline}
.blocExtraitArticlePetitSide p{margin-top: 12px}
.imageArticleAside {height: 100px; background-size: cover; background-repeat: no-repeat; margin-bottom: 15px}
.menuAside{text-transform: uppercase; background-color: #d7b255; padding:1%; display: flex;transition-duration: 0.4s; border-radius: 2px; margin-bottom: 15px}
.menuAside:hover{background-color:#786748; transition-duration: 0.4s}
.menuAside a{color:white; text-decoration: none; font-family:'nanum-pen'; font-size: 1.5em; text-transform: uppercase; margin:auto}
.menuAside img{margin-right: 15px}


/* ---------------- RUBRIQUES ----------------  */
.afficherExtraitArticle a {text-transform: uppercase; color:#656565}
.afficherExtraitArticle {border-bottom:1px solid #ddd; margin-top:20px}
.extraitBlocFlex {display: flex; margin-top: 20px}
.imageMiniatureArticle {margin: 0 20px 0 0}
.BoutonRubriques a{font-size:0.8rem; background: #d7b255; border : 2px solid #d7b255;border-radius: 3px;  color: white!important; padding: 5px 20px; transition-duration: 0.3s}
.BoutonRubriques a:hover{background:transparent; color: #d7b255!important;transition-duration: 0.3s; text-decoration: none}
.BoutonRubriques {display: block;margin-bottom: 30px;margin-top: 15px; text-align: right; font-family: 'lato'; font-weight: bold}

/* ---------------- PAGE 404 ----------------  */
.errorPage{margin:30px auto 30px auto;padding:2%; -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);  background-color: white}
.errorPage img {margin: auto}
.imgError {display: flex}
.cartouche {display: block}
.messageError { margin: 30px}
.BoutonRetourHome a{font-size:0.8rem; background: #d7b255; border : 2px solid #d7b255;border-radius: 3px;  color: white!important; padding: 5px 20px; transition-duration: 0.3s}
.BoutonRetourHome a:hover{background:transparent; color: #d7b255!important;transition-duration: 0.3s; text-decoration: none}
.BoutonRetourHome {display: block;padding-bottom: 30px;padding-top: 15px; text-align: center; font-family: 'lato'; font-weight: bold}
.oups {text-align: center}
.infoOups {text-align: center; margin-bottom: 20px}

/* ---------------- PAGE RECHERCHE ----------------  */
.resultatRecherche{margin:30px auto 30px auto;padding:2%; -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);  background-color: white}
.cartouche h2 {font-family: "lato"; font-size: 2em}

/* ---------------- RESPONSIVE TRICKS ----------------  */
@media (min-width: 990px) and (max-width: 1300px) {
    .textRowDroiteBas {padding: 41% 0%;}
    #contactezNous {display:none}
    
    .logoSite img {width:133px; height: 114px; margin-top:-8px}
    .adresse {margin:auto}
    .texteIconeRappel {display: none}
    .etreRappele {padding: 10px 5px}
    
}

@media (max-width: 990px) {
    .texteCarrousel h1{font-size: 1.2em}
    #contactezNous {margin-left:0; padding-left : 20px; max-width: 60%}
    .texteCarrousel p{display: none}
    .texteCarrousel .boutonRose{display: none}
    .GridOffre {display: block}
    .colonne20{width:100%}
    .colonne40{width:100%}
    .colonne50{width:100%}
    .gridBlocBoxes {display: block}
    .colonneGauche {width:100%}
    .colonneMilieu {width:100%}
    .colonneDroite {width:100%}
    .articlesActu {display: block}
    .texteIconeRappel {display: none}
    .etreRappele{padding:15px 7px}
    .fenetrerappel{top:30%}
    .container.footer{display: block}
    .footer .col-4 {max-width: 100% !important}
    .logoBas img{width:90%; margin:10px}
    .topBar .col{display: flex; text-align: right;}
    .topBar a > img {margin-left: 5px}
    .topBar .formulaire_spip {margin-left: 10px}
    #spip-admin {right:10%}
    .containerGlobal {display: block}
    .containerChapeau {width: 90%; margin-bottom: 50px}
    .resultatRecherche{width: 90%; margin-bottom: 50px}
    .resultatRecherche li {margin-left: 5%}
    .asideCol{width: 90%; margin: auto}
    .carrouselBlogDroit {width: 100%}
    .imageArticleAside {height: 150px}
    .post{width:100%}
    .relatedPosts {display: block}
    #formulaire_formidable-1 {width:90%;margin: auto}
    .agencesFooter{display: block}
    .col20prct.agenceFooter{width:100%}
    
    .logoSite img {width:133px; height: 114px; margin-top:-7px}
    .adresse {margin:auto}
    .texteIconeRappel {display: none}
    .etreRappele {padding: 10px 5px}
    .drapeauxEtRecherche#formulaire_recherche {display: none}
    #navbarSupportedContent.collapse.show {display: block; padding-top: 40px; margin-left: 2%;}
    #navbarSupportedContent.collapsing {display: block; padding-top: 40px; margin-left: 2%;}
    #contactezNous {display: none}
    
    .formulaire_contact_lama  {padding:10px ;margin: auto; background-color: #f1eee9}
    .editer.showLabel {text-align: left}
    .agriBioTexte .container {display: block;margin: auto;}
    .bg-light {width: 100%;}
    
    .row.qualiteOutdoorTexte .container {display: block;}
    .logoOutdoor {text-align: center;}
    .logoBio {text-align: center;}
    .FooterGrid {display: block}
    .NavBas {padding-bottom: 15px}
    
    .carrouselBlogDroit{display: flex; flex-direction: column;}
    .carrouselBlogDroit h1{margin: auto}
    .carrouselBlogDroit p{margin: auto}
    
    .drapeauxEtRecherche #formulaire_recherche {display: none}
    
    .imgLamaVente{text-align: center}
    
    /* POUR QUE GOOGLE SOIT CONTENT */
    .datePublication {font-size: 15px}
    .drapeauxNavREsp a {margin-right: 15px}
    .grecaptcha-badge {z-index:2}
}

@media (max-width: 768px) {

    .topBar {display: none}
    #diaporamaLama img {width: 100%; height: auto}

}

@media (min-width: 990px) {

    .laurenceEduardo p{margin-top: 20px}
    .actusSecondaires {margin-left: 20px}
    .colonne50{width:50%}
    .blocNavRespAdresse {display: none}
    .blocNavRespLiens {display: none}
    .FormulaireRechercheRespNav {display: none}
    .blocLamaVente {display: flex}
}


@media (max-width: 500px) {
.blocCol40 .titreBloc{font-size: 10px}
#rappelResponsive {display: flex; margin: auto; width: 70%; position: fixed; bottom: 20px; background-color: #d7b255; z-index: 1;box-shadow: 0px -1px 5px #786748;}
.row.rappel {margin: auto}
    .texteIconeRappelResp {padding:10px;}
    .texteIconeRappelResp a{color:white; text-transform: uppercase}
    .iconeTel {padding:10px}
    #fenetrerappel {display: none}
    .colophon {margin-bottom: 40px}
    .FooterGrid {padding-left:0}
    
}