/* ====
Georges Didier
version avec menu glissant d'en haut
le
CSS perso compl�t� par celui de KickStart
==== */

/*---------- IMPORTS -----------*/
@import url(kickstart-forms.css);
/* @import url(kickstart-grid.css); */
@import url(styles-divers.css);

/*---------------------------------
	HTML ELEMENTS
-----------------------------------*/
* {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

a {
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  color: #00afdb;
}

a:hover {
  color: #be00db;
}

body {
  font-size: 16px;
  color: #3b3b3b;
  font-family: "Calibri", sans-serif;
  /* font-family: 'Arial', sans-serif; */
  line-height: 1.5;
}

p {
  word-wrap: break-word;
  margin: 15px 0;
  font-size: 1rem;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 0;
  margin: 0;
}

h1 {
  /* font-family: 'Courgette', cursive; */
  font-family: "Calibri", sans-serif;

  font-size: 2.2em;
  /* font-weight: bold; */
  margin: 40px 0 20px 0;
  text-align: center;
}

h2 {
  /* font-family:'Bad Script', cursive;*/
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0;
}

h3 {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 20px 0 0 0;
}

.nickname {
  display: none;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.small {
  font-size: 0.8em;
}

.petitEcran {
  display: none;
}

.grandEcran {
  display: block;
}

/* #page {margin-top:150px; border-radius:10px 10px 0 0; background-color: rgba(255,255,255,0.8); box-shadow:2px 1px 10px rgba(0,0,0,0.4);} */

#fond {
  width: 100%;
  position: fixed;
  right: 0;
  height: 100%;
  z-index: 1;
}

video {
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
}

audio {
  border-radius: 4px;
  box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
}

/* ======= 
ENTETE
====== */
#header {
  padding: 5px 0 10px;
  margin: 0;
  height: auto;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: -2px 2px 20px rgba(0, 0, 0, 0.5);
  z-index: 99999;
  position: relative;
  width: 100%;
}

.headerTitre {
  width: 100%;
}

.headerSousTitre,
.headerMenu {
  float: left;
  position: relative;
  height: 50px;
}

.headerMenu {
  width: 60%;
}

.headerSousTitre {
  width: 39%;
}

.headerTitre h1 {
  padding-left: 20px;
  margin: 0;
  text-align: left;
  font-family: "Marck Script", cursive;
  /* font-family: 'Calibri', sans-serif; */
  font-size: 3.5em;
  font-weight: normal;
  line-height: 1.2em;
}

.headerSousTitre h2 {
  padding-left: 20px;
  font-size: 1em;
  line-height: 1.1em;
  font-weight: normal;
  letter-spacing: 1px;
  font-weight: bold;
}

.headerTitre h1 a {
  color: inherit;
  font-weight: inherit;
}

/* ======= 
NAVIGATION
======= */
.menu {
  padding: 0;
  text-align: right;
  margin: 0;
  position: absolute;
  bottom: 0px;
  right: 0;
}

.menu li {
  display: inline;
  color: #403a3a;
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 1px;
}

.menu li a {
  color: #403a3a;
  padding: 10px 0px 0px;
  display: inline-block;
  position: relative;
  zoom: 1;
  line-height: 1.1em;
}

/* .menu li a:hover {color:#ffad3d} */
.menu li a:hover {
  border-bottom: 3px solid #ffad3d;
}

#menuZenLateral {
  display: none;
}

.menuBouton {
  display: none;
}

/* =========== 
BLOC PRINCIPAL
=========== */
#content {
  position: relative;
  z-index: 99998;
  width: 50%;
  background-color: rgba(255, 255, 255, 0.9);
}

#blocGauche {
  padding: 0 40px 10px 40px;
  /* margin-top:40px */
}

#blocGauche h1 {
  margin: 40px 0;
  line-height: 1em;
  text-align: center;
}

#contentLivres {
  position: relative;
  z-index: 99998;
  width: 75%;
  background-color: rgba(255, 255, 255, 1);
}

.alerte {
  border-radius: 8px 4px 8px 4px;
  padding: 12px 18px 14px;
  background-image: none;
  /* display: inline-block; */
  text-align: center;
  color: #f8f8f8;
  font-size: 1.4rem;
  line-height: 110%;
  font-weight: bold;
  letter-spacing: 1px;
  background-color: #ce3d3a;
  margin: 10px 0;
}

/* =========== 
BLOC DROIT
=========== */
/* #blocDroit {position:absolute; float:right; width:33%} */

/* =========== 
AGENDA
=========== */
.agenda {
  border-left: 2px solid #db4b00;
}

.agenda h2 {
  /* color: #f07c01; */
  color: #db4b00;
  font-size: 1.1rem;
  margin: 0;
  line-height: 1.2em;
  padding: 0;
  padding-left: 20px;
}

.agenda h2 img {
  padding-right: 10px;
}

.agenda h4 {
  color: #e27500;
  /* color: #c44e00; */
  font-size: 1rem;
  margin: 0;
  line-height: 1.1em;
  padding: 0;
  padding-left: 20px;
  font-style: italic;
  font-weight: 600;
}

.agenda p {
  /* font-size: 1em; */
  margin-top: 10px;
  margin-bottom: 0;
  line-height: 1.1em;
  padding-left: 0px;
}

.agenda p strong {
  font-size: 1em;
}

.avecFleche {
  background: url(../art/flecheRouge.png) 0 0 no-repeat;
}

.lheight16 {
  line-height: 1.6em !important;
}

/* *******************
*	   Formulaire    *
******************** */
.erreur {
  margin-left: 5px;
  font-weight: bold;
  color: #ff0000;
  vertical-align: middle;
}

.nickname {
  display: none;
}

.contact2 {
  text-align: center;
}

label {
  font-weight: bold;
}

input,
textarea {
  width: 80%;
  text-align: left;
}

button,
input[type="submit"] {
  width: 200px;
  /* background-color:#92e905; */
  cursor: pointer;
  box-shadow: none;
  /* text-transform:uppercase; */
  /* padding:3px;  font-size:0.8em*/
}

/* button, input[type="submit"]:hover {background-color: #ffaf05;} */

/* =========== 
 BOUTIQUE
=========== */
#blocGauche .form-item {
  margin: 30px 0;
  border-top: 1px solid #dedede;
  padding-top: 10px;
}

#blocGauche .form-item h1 {
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 10px 0;
}

.form-item div.prix {
  float: left;
}

.form-item div.ajoutPanier {
  float: right;
}

.form-item input,
.form-item button {
  width: auto;
  /* padding:3px !important; font-size:0.8em; */
}

.form-item .col_9 {
  padding: 0 0 0 20px;
}

.panier-item h1 {
  font-size: 26px;
  line-height: 26px;
  margin: 0;
  text-align: left;
}

.panier-item img {
  width: 100px;
  margin-right: 10px;
}

.panier-item ul li {
  margin: 30px 0;
  border-top: 1px solid #dedede;
  padding-top: 10px;
  display: table;
  width: 100%;
}

.panierTotaux {
  text-align: right;
  padding-top: 5px;
  border-top: 1px solid #6e6e6e;
  margin: 20px 0 0 0;

  font-size: 18px;
}

.panierTotaux span.port {
  font-weight: normal;
  font-size: 16px;
}

.panierTotaux span.totalTTC {
  font-weight: bold;
  font-size: 22px;
}

/* .coordonnees {display:none} */
.coordonnees input {
  text-align: left;
}

.coordonnees textarea[name="coordAdresse"] {
  width: 50%;
  height: 100px;
}

.coordonnees textarea[name="coordremarque"] {
  width: 100%;
  height: 100px;
}

.coordonnees label {
  margin-top: 15px;
}

.col_1 {
  width: 6.6666666666667%;
}

.col_2 {
  width: 15%;
}

.col_3 {
  width: 23.333333333333%;
}

.col_4 {
  width: 31.666666666667%;
}

.col_5 {
  width: 40%;
}

.col_6 {
  width: 48.333333333333%;
}

.col_7 {
  width: 56.666666666667%;
}

.col_8 {
  width: 65%;
}

.col_9 {
  width: 73.333333333333%;
}

.col_10 {
  width: 81.666666666667%;
}

.col_11 {
  width: 90%;
}

.col_12 {
  width: 98.333333333333%;
  margin-top: 0;
  margin-bottom: 0;
}

*[class*="col_"] {
  float: left;
  display: block;
}

*[class*="col_"] img {
  max-width: 100%;
  height: auto;
}

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

* html .clearfix,
*:first-child + html .clearfix {
  zoom: 1;
}

.flexLigne {
  display: flex;
  justify-content: space-around;
}

/* =========== 
 PIED
=========== */
.pied {
  padding: 15px 6px 10px;
}

.pied div[class*="col_"] {
  margin-bottom: 0;
}

.pied p {
  color: #3b3b3b;
  font-size: 14px;
  margin: 0;
}

.pied a {
  color: #d8922d;
  font-weight: bold;
  text-decoration: none;
}

.pied a:hover {
  color: #81a21e;
  text-decoration: underline;
}

.copyright,
.copyright a {
  font-size: 11px;
}

/* Tooltip */
#preview {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  z-index: 1000;
  background: #9a59b5;
  padding: 3px 8px;
  display: none;
  color: #eee;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 1px 1px 3px #333;
  -webkit-box-shadow: 1px 1px 3px #333;
  box-shadow: 1px 1px 3px #333;
}

@media all and (min-width: 1024px) and (max-width: 1130px) {
  .headerMenu {
    width: 50%;
  }

  .headerSousTitre {
    width: 49%;
  }
}

@media all and (min-width: 1024px) and (max-width: 1240px) {
  #content {
    width: 62%;
  }
}

@media all and (min-width: 1024px) and (max-width: 1128px) {
  .menu li {
    letter-spacing: 0px;
  }
}

@media all and (max-width: 1024px) {

  .headerMenu,
  .headerSousTitre {
    width: 100%;
  }

  .menu {
    position: relative;
    margin-top: 8px;
    clear: both;
    text-align: center;
  }

  .headerTitre h1,
  .headerSousTitre h2 {
    margin: 0 0 10px 0;
    padding: 0;
    text-align: center;
    font-size: 3em;
  }

  .headerSousTitre h2 {
    font-size: 13px;
  }
}

@media all and (min-width: 768px) and (max-width: 1024px) {

  .headerSousTitre,
  .headerMenu {
    height: 50px;
  }

  .menu li a {
    font-size: 1em;
    padding: 0;
  }

  input,
  textarea {
    width: 100%;
  }

  #content {
    width: 62%;
  }

  /* #fond {width:38%} */
  #fond {
    width: 100%;
  }
}

@media all and (max-width: 768px) {
  #content {
    width: 62%;
  }

  .flexLigne {
    display: block;
  }

  /* #fond {width:38%} */
  #fond {
    width: 100%;
  }

  .agenda p {
    font-size: 1.1em;
  }

  h1 {
    font-size: 2.1em;
  }

  h2 {
    font-size: 1.5em;
  }

  p {
    font-size: 1.1em !important;
  }

  input,
  textarea {
    width: 100%;
  }

  .panierSousTotal {
    text-align: center;
    border-top: 1px solid #6e6e6e;
    padding-top: 5px;
    margin: 10px 0 20px;
    font-size: 20px;
  }

  .coordonnees input {
    width: 100%;
  }

  .coordonnees textarea[name="coordAdresse"] {
    width: 100%;
    height: 100px;
  }

  *[class*="col_"] {
    float: none;
    width: auto;
    clear: both;
    display: block;
  }
}

@media all and (min-width: 650px) and (max-width: 768px) {
  .menu li {
    font-weight: normal;
    letter-spacing: 0px;
  }

  .menu li a {
    padding: 0 2px;
  }
}

@media all and (max-width: 650px) {
  #header {
    width: 90%;
    margin: 20px auto 0;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 10px 10px 0 0;
  }

  .headerTitre {
    padding: 20px 10px;
  }

  .headerTitre h1 {
    font-size: 2.5em;
    line-height: 1em;
    margin-bottom: 10px;
  }

  .headerTitre h2 {
    font-size: 12px;
    padding: 10px;
  }

  .headerMenu {
    display: none;
    width: 0;
    height: 0;
  }

  #content,
  #contentLivres {
    width: 90%;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.85);
  }

  #blocGauche {
    padding-top: 20px;
  }

  #fond {
    width: 100%;
  }

  .petitEcran {
    display: block;
  }

  .grandEcran {
    display: none;
  }

  #navigation {
    display: none;
  }

  .menuBouton {
    display: block;
    text-align: center;
    font-size: 22px !important;
    cursor: pointer;
    color: #3b3b3b;
    margin: 20px 0 0;
    line-height: 20px;
  }

  .menuBouton img {
    vertical-align: top;
  }

  #menuZenLateral {
    display: block;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 2px 1px 10px rgba(0, 0, 0, 0.4);
    height: 360px;
    margin: -360px auto 0;
    width: 90%;
    transition: all 0.3s ease;
    border-radius: 0 0 10px 10px;
  }

  #menuZenLateral ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #menuZenLateral li a {
    text-align: center;
    color: #000;
    font-size: 22px;
    line-height: 40px;
    display: block;
    text-decoration: none;
    font-weight: bold;
  }

  #menuZenLateral li:hover {
    background: rgba(255, 200, 200, 0.85);
    color: #bd4400;
  }

  #menuZenLateral li a.boutonFermer {
    font-size: 16px;
    font-weight: normal;
  }

  h1 {
    font-size: 2em;
  }
}

@media all and (max-width: 380px) {
  .panier-item img {
    display: none;
  }
}

/* ====
BOUTONS
==== */

.btn,
button,
input,
input[type="submit"],
input[type="reset"],
input[type="button"],
select {
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  overflow: visible;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  *display: inline;
  /*IE ONLY*/
  zoom: 1;
  border-radius: 8px 4px 8px 4px;
  padding: 12px 18px 14px;
  -moz-user-select: none;
  background-image: none;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  white-space: normal;
  color: #f8f8f8;
  font-size: 1.2rem;
  line-height: 110%;
  font-weight: normal;
  letter-spacing: 1px;
  margin: 0;
  text-indent: 0;
  transition: background-color 0.2s ease-in;
}



input,
select {
  padding: 6px 8px;
  color: #3d3c3c;
}

select {
  width: 60%;
  font-size: 1rem;
}

select[name="p_qte"] {
  width: auto;
}

.btn:hover,
.btn:focus,
.btn:active {
  text-decoration: none !important;
  color: #ffffff !important;
}

.btn-vert {
  background-color: #a5bb41;
  /* border: 1px solid #c4d57b; */
}

.btn-vert:hover {
  background-color: #cedf8d;
  /* border: 1px solid #b1c36c; */
}

.btn-rouge {
  background-color: #ce3d3a;
  /* border: 1px solid #d64744; */
}

.btn-rouge:hover {
  background-color: #ce6b6b;
  /* border: 1px solid #c24343; */
}

.btn-mauveFonce {
  background-color: #ac1f94;
  /* border: 1px solid #d64744; */
}

.btn-mauveFonce:hover {
  background-color: #6e0c5e;
  /* border: 1px solid #c24343; */
}

.btn-mauve {
  background-color: #7d69c7;
  /* border: 1px solid #d64744; */
}

.btn-mauve:hover {
  background-color: #503c99;
  /* border: 1px solid #c24343; */
}

.btn-orange {
  background-color: #e2ae62;
}

.btn-orange:hover {
  background-color: #81a21e;
}

.btn-turq {
  background-color: #a1dcd5;
  /* border: 1px solid #a1dcd5; */
}

.btn-turq:hover {
  background-color: #7dcec4;
  /* border: 1px solid #7dcec4; */
}

.btn-bleu {
  background-color: #91c7df;
  /* border: 1px solid #91c7df; */
}

.btn-bleu:hover {
  background-color: #599fc0;
  /* border: 1px solid #599fc0; */
}

.btn-bleuFonce {
  background-color: #12487d;
}

.btn-bleuFonce:hover {
  background-color: #599fc0;
}

.btnXL {
  padding: 6px 12px 8px !important;
  font-size: 18px !important;
}

.petit {
  padding: 4px 6px;
  line-height: 80%;
}