@charset "UTF-8";
/* CSS Document */

/** FONTS */
@font-face {
    font-family: 'LouisGeorgeCafe';
    src: url('fonts/LouisGeorgeCafe.eot');
    src: url('fonts/LouisGeorgeCafe.eot') format('embedded-opentype'),
         url('fonts/LouisGeorgeCafe.woff2') format('woff2'),
         url('fonts/LouisGeorgeCafe.woff') format('woff'),
         url('fonts/LouisGeorgeCafe.ttf') format('truetype'),
         url('fonts/LouisGeorgeCafe.svg#LouisGeorgeCafe') format('svg');
}
@font-face {
  font-family: 'Chapaza';
  src: url('fonts/Chapaza.eot');
  src: url('fonts/Chapaza.eot') format('embedded-opentype'),
       url('fonts/Chapaza.woff2') format('woff2'),
       url('fonts/Chapaza.woff') format('woff'),
       url('fonts/Chapaza.ttf') format('truetype'),
       url('fonts/Chapaza.svg#Chapaza') format('svg');
}
@font-face {
  font-family: 'AlteHaasGroteskBold';
  src: url('fonts/AlteHaasGroteskBold.eot');
  src: url('fonts/AlteHaasGroteskBold.eot') format('embedded-opentype'),
       url('fonts/AlteHaasGroteskBold.woff2') format('woff2'),
       url('fonts/AlteHaasGroteskBold.woff') format('woff'),
       url('fonts/AlteHaasGroteskBold.ttf') format('truetype'),
       url('fonts/AlteHaasGroteskBold.svg#AlteHaasGroteskBold') format('svg');
}
@font-face {
  font-family: 'AlteHaasGroteskRegular';
  src: url('fonts/AlteHaasGroteskRegular.eot');
  src: url('fonts/AlteHaasGroteskRegular.eot') format('embedded-opentype'),
       url('fonts/AlteHaasGroteskRegular.woff2') format('woff2'),
       url('fonts/AlteHaasGroteskRegular.woff') format('woff'),
       url('fonts/AlteHaasGroteskRegular.ttf') format('truetype'),
       url('fonts/AlteHaasGroteskRegular.svg#AlteHaasGroteskRegular') format('svg');
}



/** COULEURS **/
:root{
  --vert_clair: rgb(77, 138, 51);
  --vert_clair_b: rgba(77, 138, 51, 0.5);
  --bleu_clair: #7bb6bc;
	--bleu_fonce: darkblue;
  --rouge_clair: #ff6868;
	--rouge_fonce: #d0343a;
}

body {font-family: 'AlteHaasGroteskRegular'; min-width: 320px}

/** HEADER **/
#header {padding-top: 2em}
#header .inner {position: relative; overflow: hidden}
#header .bloc_inner {display: block; overflow: hidden}
#header .inner .menu {margin: 0}
#header div.panier {margin-top: 10px}
#bloc_logo {position: relative; }
#menu_lang { position: absolute; left: 0; width: 200px; z-index: 10; text-align: left}
#menu_titre {position: absolute; width: 60%; min-width: 275px; bottom: 0; right: 0; z-index: 10}
#menu_titre h1 {color: var(--vert_clair); font-family: 'Chapaza' !important;
  font-size: 3em; line-height: 1.2em; letter-spacing: 0.05em; text-align: right;
  /*font-size: 2.75em; line-height: .9; letter-spacing: 0.1em; text-align: right;*/}
.langue {display: inline-block;}
#menu ul.rang2 {list-style: none; font-style: italic}
#header nav ul li a[href="#menu"] {font-size: .7em !important; line-height: 1em; text-indent: 0; letter-spacing: .2em;}
#header nav ul li a[href="#menu"]::before, #header nav ul li a[href="#menu"]::after {top: .7em;}


#header nav ul {overflow: hidden; height: inherit}
#header li.menu_panier #bloc_minipanier { padding: .4em .6em; background-color: rgba(255, 255, 255, 0.5); border-radius: 4px; margin-right: 10px;}
#header li.menu_panier li {margin: 0 5px}
/*#header .logo .symbol img {display: block;width: 9em; height: 9em}*/
#header #bloc_minipanier form {margin: 0 0 0 0;}
@media screen and (min-width: 736px) {
   #menu_lang {top: 60px; }
   #header .logo .symbol {margin: 0; padding-right: 3em;}
   #header .logo {
      height: 300px; margin: 0;
      -webkit-transform-origin: 55% 47%;
      -moz-transform-origin: 55% 47%;
      -ms-transform-origin: 55% 47%;
      -o-transform-origin: 55% 47%;
      transform-origin: 55% 47%;
      -webkit-transform: rotate(120deg) scale(0.8) translate(100px,0);
      -moz-transform: rotate(120deg) scale(0.8) translate(100px,0);
      -ms-transform: rotate(120deg) scale(0.8) translate(100px,0);
      -o-transform: rotate(120deg) scale(0.8) translate(100px,0);
      /*transform: rotate(120deg) scale(0.8) translate(100px,0);*/
      transform: rotate(120deg) scale(0.5) translate(0,30px);
      -moz-transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
      float: left;
   }
   body:not(.is-touch) #header .logo:hover {
      height: 450px;
      -webkit-transform: rotate(100deg) scale(1) translate(50px,-30px); /* Safari et Chrome */
      -moz-transform: rotate(100deg) scale(1) translate(50px,-30px); /* Firefox */
      -ms-transform: rotate(100deg) scale(1) translate(50px,-30px); /* Internet Explorer 9 */
      -o-transform: rotate(100deg) scale(1) translate(50px,-30px); /* Opera */
      /*transform: rotate(100deg) scale(1) translate(50px,-30px);*/
      transform: rotate(100deg) scale(1) translate(60px,30px);
      }
}
@media screen and (max-width: 736px) {
   #menu_lang {top: 40px; }
   #header .logo .symbol {margin: 0; padding-right: 0;}
   #header {padding-top: 2em}
   #header .logo {
      height: 200px; margin: 0;
      -webkit-transform-origin: 55% 47%;
      -moz-transform-origin: 55% 47%;
      -ms-transform-origin: 55% 47%;
      -o-transform-origin: 55% 47%;
      transform-origin: 55% 47%;
      -webkit-transform: rotate(120deg) scale(0.5) translate(100px,0);
      -moz-transform: rotate(120deg) scale(0.5) translate(100px,0);
      -ms-transform: rotate(120deg) scale(0.5) translate(100px,0);
      -o-transform: rotate(120deg) scale(0.5) translate(100px,0);
      transform: rotate(120deg) scale(0.5) translate(100px,0);
      -moz-transition: all 1s ease;
      -webkit-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
      float: left;
   }
   body:not(.is-touch) #header .logo:hover {
      height: 350px;
      -webkit-transform: rotate(100deg) scale(0.7) translate(70px,-40px); /* Safari et Chrome */
      -moz-transform: rotate(100deg) scale(0.7) translate(70px,-40px); /* Firefox */
      -ms-transform: rotate(100deg) scale(0.7) translate(70px,-40px); /* Internet Explorer 9 */
      -o-transform: rotate(100deg) scale(0.7) translate(70px,-40px); /* Opera */
      transform: rotate(100deg) scale(0.7) translate(70px,70px);
      }
}
@media screen and (max-width: 480px) {
  #menu_titre h1 {font-size: 2.2em; }
  ul.actions:not(.fixed) {-moz-flex-direction: inherit;
      -webkit-flex-direction: inherit;
      -ms-flex-direction: inherit;
      flex-direction: inherit;}
  #header .logo {
    -webkit-transform-origin: 44% 29%;
    -moz-transform-origin: 44% 29%;
    -ms-transform-origin: 44% 29%;
    -o-transform-origin: 44% 29%;
    transform-origin: 44% 29%;}
  body:not(.is-touch) #header .logo:hover {
    -webkit-transform: rotate(70deg) scale(0.7) translate(10px,0); /* Safari et Chrome */
    -moz-transform: rotate(70deg) scale(0.7) translate(10px,0); /* Firefox */
    -ms-transform: rotate(70deg) scale(0.7) translate(10px,0); /* Internet Explorer 9 */
    -o-transform: rotate(70deg) scale(0.7) translate(10px,0); /* Opera */
    transform: rotate(70deg) scale(0.7) translate(10px,0);
    }
}


/** TEXTE **/
h1 {font-family: 'AlteHaasGroteskBold'; letter-spacing: 0; line-height: 1.5em;} 
h2, h3, h4, h5, h6 {font-family: 'AlteHaasGroteskBold'; text-transform: none; letter-spacing: 0.25em; padding: 1em 0; }
h1 small {font-size: 50%; font-style: italic; font-weight: lighter;}
h2 {text-align: left}
a {border-bottom: none}
#header {padding-top: 0}
#bloc_logo {padding-top: 2em}
blockquote {border-left: none; font-style: italic; margin: 0 auto 2em; padding: 0.5em 0; width: 60%; line-height: 1.4em; color: darkgray;}  

@media screen and (max-width: 480px) {
   blockquote {width: 100%; text-align: left;} 
   h2 {text-align: left}
  }

/** TEXTE DIVERS **/
.justifier {text-align:justify}
.gras {font-weight: bold}
.texte {text-align:justify}
.notes {font-style: italic; font-size: 90%; color: darkgrey}
.majuscules { text-transform: uppercase}
.minuscules { text-transform: lowercase}
.txmarg1em {margin: 0 1em}
.droite {text-align: right}
.gauche {text-align: left}
.floatdr {float: right}
.floatga {float: left}
.rouge_fonce {color: var(--rouge_fonce);}
.bleu {text-align: center; color: var(--bleu_fonce)}
.cent {width: 100%}
.moderation_info {
  background: none repeat scroll 0% 0% #D5EDF8;
  padding: 0.8em;
  margin-bottom: 1.5em;
  border: 2px solid #92CAE4;
  width: 100%;
  margin: 0px;
    margin-bottom: 0px;
  box-sizing: border-box;}
  



/** MAIN **/
#main .colonne {display: inline-block; width: 49%; vertical-align: top; overflow: hidden;}
#main footer {margin-top: 4em; }
ul.produits {/*clear: both;*/ text-align: center;}
ul.produits li {width: 49%}
#main header {position: relative; margin-bottom: 2em;}
#main header span.slogan {position: absolute; top: 1em; left: 1em; color: white; font-size: 2em; z-index: 10; font-weight: 900; text-transform: uppercase; letter-spacing: 0.35em; }
#produit-galerie {float: left; height: 100%}
@media screen and (min-width: 641px) {
   #main .colonne_dr {padding-left: 10px}  
   #main .colonne_ga {padding-right: 10px}   
}
@media screen and (max-width: 640px) {
   #main .colonne {width: inherit; display: block}
   #main .colonne .produit-image {mar}
   #main .colonne h1.titre {margin-top: 1em }
   #produit-galerie {margin: 0 2em}
   #produit-galerie .produit-image dl {margin: 0}
}
@media screen and (max-width: 480px) {
	#main header span.slogan {font-size:1em}
}


/** MOTS **/
.items_list {display: flex; flex-wrap: wrap; justify-content: space-between;}
.items_list .item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; background-color: #fff; margin-bottom: .5rem;}
.items_list.mot .item {width: 100%}
.items_list .fas::before {vertical-align: middle}
.items_list .item_on .icon-meta {color: var(--vert_clair) !important; border: 1px solid var(--vert_clair); }
.items_list .icon-meta {display: flex; flex-wrap: wrap; width: 100%; align-items: center; }
.items_list .icon-meta:hover, .items_list .icon-meta:active {color: white !important; background-color: var(--vert_clair_b);}
.items_list .icon {width: 22%; font-size: 2rem; text-align: center; line-height: 1em}
.items_list.mot .icon {width: 40px}
.items_list .name {width: 72%; font-family: 'AlteHaasGroteskBold'; font-weight: 500; line-height: 1em}
.items_list.mot .name {width: calc(100% - 50px)}
@media screen and (min-width: 1281px) {
  
  .items_list .item {width: 19%;}
  .items_list .fas::before {font-size: 80%;}
}
@media screen and (max-width: 1280px) {
  .items_list .item {width: 24%;}
  .items_list .fas::before {font-size: 60%;}
}
@media screen and (max-width: 768px) {
  .items_list .item {width: 32%;}
}
@media screen and (max-width: 480px) {
  .items_list .item {width: 49%;}
  .items_list .fas::before {font-size: 50%;}
}

/** MOSAÏQUE **/
.mot_mosaique{margin: 2em 0; border-radius: .25rem; /*border: 1px solid #efefef;*/ }
.tiles {margin: 0; width: 100%}

.tiles article > a, .tiles article > a:hover, .tiles article:hover  h3 {color: black}
.tiles article > .image {border: 1px solid #999; border-radius: 5px;}
.mos_article .tiles article > .image, .rubrique7 .tiles article > .image, .rubrique8 .tiles article > .image {border: none; }
.tiles article > .image {background-color: transparent; opacity: 1;}
body:not(.is-touch) .tiles article:hover > .image {opacity: .5;}
body:not(.is-touch) .tiles article:hover > .image::before {background-color: transparent; opacity: 0;}
body:not(.is-touch) .rubrique2 .tiles article:hover > .image::before {background-color: #333333; opacity: 0.35;}
.tiles article > .image::after {background-image: none}
.tiles article > .image::before {opacity: 0.6;}
.tiles article h3 {font-size: 1em; }
.tiles article > a {padding: .5em}

body.is-touch .tiles article h3 {display: none}
/* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {
  .tiles article:hover > content {display: none}
}
@media screen and (min-width: 1281px) {
   .tiles article {width: calc(25% - 2.5em); margin: 1.25em;}
   .tiles_resume article {width: calc(20% - 2.5em); margin: 1.25em;}
}
@media screen and (max-width: 1280px) {
   .tiles article h3 {letter-spacing: .1em}
   .tiles article {width: calc(25% - 1.3em); margin: .65em; }
   .tiles_resume article {width: calc(20% - 1.3em); margin: .65em;}
}
@media screen and (max-width: 768px) { /**736px**/
   .tiles article {width: calc(33.33333% - 1.3em); margin: .65em;}
   /*.tiles.tiles_resume article {width: calc(25% - 1.3em); margin: .65em; }*/
}
/*@media screen and (max-width: 736px) {
   .tiles.tiles_resume article {width: calc(50% - 2.5em); margin: 1.25em;}
}*/
@media screen and (max-width: 480px) {
   .tiles article {width: calc(50% - 1em); margin: .5em;}
   body:not(.is-touch) .tiles article:hover > .image:before {opacity: 0.6}
   .tiles article h3 {font-size: .9em; line-height: 1.3em;}
}


/** ADMIN **/
/**.admin .texte p {margin: 2em 0 0 0;}**/
@media screen and (min-width: 769px) {
  .admin .nivoSlider-wrap {width: 70%}
  .admin .inner .texte {width: 70%; margin: 0 auto}
}


/** BLOCS DEPLIABLES **/
.blocs_titre {padding: 0}
h4.blocs_titre, h4.blocs_replie { background:transparent none;}
h4.blocs_titre > a {display: inline-block; width: 100%; height: 3em;padding: 0 2em; line-height: 3em; font-family: 'AlteHaasGroteskBold'; font-weight: 500; font-size: 1.1em; box-shadow: inset 0 0 0 1px #585858; margin: 2em 0; color: #585858 !important;  }
h4.blocs_titre.blocs_replie a { color: #585858 !important; box-shadow: inset 0 0 0 1px #585858; background-color: #fff; }
h4.blocs_titre > a { color: var(--vert_clair) !important; box-shadow: inset 0 0 0 2px var(--vert_clair); background-color: var(--vert_clair_b);}
h4.blocs_titre.blocs_replie a:hover { color: var(--vert_clair) !important; box-shadow: inset 0 0 0 2px var(--vert_clair); background-color: var(--vert_clair_b);}
/*.blocs_resume {padding: 0 2em 2em}*/
.blocs_destination {padding: 2em; background: url('images/background.png') repeat scroll 0% 0% #FFF; overflow: hidden; border: thin #CCC solid;}


/** BOUTONS NEW **/
/*input[type="submit"], input[type="reset"], input[type="button"], button, .button {height: 3em; padding: 0 1em 0 1em;}*/
.icon::before {font-weight: 900;}
.fa, .fab, .fal, .far, .fas {font-size: 1.1em; line-height: 1em}
form.bouton_action_post {margin: .5em 0 1.5em;}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover, .button:hover { color: var(--vert_clair) !important; box-shadow: inset 0 0 0 2px var(--vert_clair); background-color: var(--vert_clair_b);}
button:hover::before, .button:hover::before {color: white}
a:hover, a:active, a:focus, a.on, .formulaire_contact form > fieldset.previsu > legend {color: var(--vert_clair) !important}
input[type="submit"], input[type="reset"], input[type="button"], button, .button {height: 3em; box-shadow: inset 0 0 0 1px #585858; color: #585858 !important; letter-spacing: normal; text-transform: none; background: transparent; }
input.theme_primary[type="submit"], input.theme_primary[type="reset"], input.theme_primary[type="button"], button.theme_primary, .button.theme_primary {box-shadow: none; background-color: #585858; color: #ffffff !important; }
input[type="submit"].primary:hover, input[type="reset"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover {background-color: var(--vert_clair_b)}
.payer_mode input[type="submit"]  {height: auto; padding: 5px 20px;}
.payer_mode .boutons .submit {height: auto; padding: 5px 20px;}

@media screen and (min-width: 1281px) {
  input[type="submit"], input[type="reset"], input[type="button"], button, .button {padding: 0 1em;}
}
@media screen and (max-width: 1280px) {
  input[type="submit"], input[type="reset"], input[type="button"], button, .button {padding: 0 1em;}
}
@media screen and (max-width: 768px) {
  input[type="submit"], input[type="reset"], input[type="button"], button, .button {padding: 0 .5em;}
}
@media screen and (max-width: 480px) {

}



/** PROCEDURE PAIEMENT **/

/** breadcrumb**/
#infos_etapes {background-color:#dbdbdb ; height: 2em; list-style: none outside none; padding: 0;}
#infos_etapes li { float: left; text-align: center; width: 33.33%; height: inherit; margin: 0; padding: 0}
#infos_etapes li .fond {}
#infos_etapes li.on { background-color: #88f560; color: darkgreen;}
#infos_etapes li.erreur { background-color: var(--rouge_clair); color: var(--rouge_fonce); }
#infos_etapes li a{color:#000;}

/** panier **/
.formulaire_panier .btn_supprimerbtn {-webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; margin-left: 5px}
@media screen and (max-width: 736px) {
   .formulaire_panier .quantite-groupe {display: block}
   .formulaire_panier .quantite-groupe button, .formulaire_panier .quantite-groupe input {margin: 5px}
}
@media screen and (max-width: 450px) {
    .formulaire_panier { font-size: 70%}
}

/** coordonnees formulaires**/
.formulaire_editer .editer_bio, .formulaire_editer .editer_pgp, .formulaire_editer .editer_liens_sites {display: none}
.formulaire_com_compte .champs_extras, .formulaire_editer .editer_type, .formulaire_editer .cadre-icone {display: none}
.formulaire_com_adresse .formulaire_editer_auteur .editer-groupe {display:none}
.formulaire_com_adresse .formulaire_editer_auteur .champs_extras {display:block}
.formulaire_spip {overflow: hidden}
.formulaire_paiement .bleu {padding: 20px 20%}
.formulaire_com table {width: 100%}
.formulaire_com thead {width: auto; text-align: left; font-size: 1.1em; background-color: var(--rouge_clair); color: white; border: 1px solid #dddddd;}
.formulaire_com thead img {vertical-align: middle; margin: 0 10px; }
.formulaire_com tbody {border: 1px solid #dddddd; background-color: #fcfcfc;}
.formulaire_com tfoot {border: 1px solid #dddddd; background-color: #fcfcfc; background-color: rgba(144, 144, 144, 0.075)}
.formulaire_com table td {padding: 0.5em}
.formulaire_com table td.tableau_com {padding-right: 0; padding-left: 0}
.formulaire_com .payer_modes {overflow: hidden}
.formulaire_com_compte button.reset_password {display: none} /* button trop large */
#formulaire_inscription .mode {display: none}
#com_tableau thead {background-color: white; color: var(--rouge_fonce); }
#com_tableau tbody, #com_tableau thead {border-right: none; border-left: none}
.formulaire_editer_adresse_livraison form {margin: 0;}
#com_tableau .blanc {background-color:#FFF; border:thin solid #ddd}
#com_paiement .payer_mode {border: none; margin: 0}
#com_paiement .boutons img {vertical-align: middle}
#com_paiement .payer_mode p {margin: 5px}
#com_paiement .payer_mode .h4 {background: linear-gradient(#86d564, #5bab39); color:#fff; height:auto; vertical-align: middle; padding: 8px 35px 8px 30px;}
.commande .formulaire_spip th /*{text-align: center}*/
.commande .taille {text-align: center}
.commande tr.avertissement {text-align: center; background-color: #ff00002e; color: crimson}
.commande div.avertissement {float: left; color: crimson}