f/*--------------------------- Color variations ----------------------*/
/* Medium Layout: 1280px */
/* Tablet Layout: 768px */
/* Mobile Layout: 320px */
/* Wide Mobile Layout: 480px */
/* =================================== */
/*  Basic Style 
/* =================================== */
::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #62bb46;
  font-weight: 300;
}

:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */ color#62bb46; opacity:1; font-weight:300;}

::-moz-placeholder{ /* Mozilla Firefox 19+ */ color:#62bb46; opacity:1; font-weight:300;}

:-ms-input-placeholder{ /* Internet Explorer 10-11 */ color:#62bb46; font-weight:300;}

::-ms-input-placeholder{ /* Microsoft Edge */ color:#62bb46; font-weight:300;}

/* image background : */
/*  background-image: url("../img/background.webp");*/
/*  background-size: contain;*/

body {
  color:#000000; font-family:"Poppins", sans-serif; font-size:14px; font-weight:500; line-height:1.5em;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #000;
}
}


@media (min-width: 1200px) {
body {
 color:#000000; font-family:"Poppins", sans-serif; font-size:14px; font-weight:300; line-height:1.5em;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  background-color: #000;
}
}

@media (max-width: 1199px) {
body {
 color:#000000; font-family:"Poppins", sans-serif; font-size:14px; font-weight:300; line-height:1.5em;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  background-color: #000;
}
}

@media (max-width: 767px) {
body {
  color:#000000; font-family:"Poppins", sans-serif; font-size:14px; font-weight:300; line-height:1.5em;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  background-color: #000;
}
}

.apropos {
    display: block;
    margin-left: auto;
    margin-right: auto
   }

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



a {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  font-weight: bold;
}

a:hover {
  text-decoration: none;
  outline: 0;
  color: #632525;
}

a, a:hover a:focus {
  text-decoration: none;
  outline: 0;
  color: #635025;
}

iframe {
  border: 0;
}

a#index {
outline: 6px ridge #2d0d0d;
  border-radius: 2em;
  padding:2px 0.5em;
  font-size: 12px;
  color: #000000;
  font-weight: 600;
  background-color: #cdcdcd;
}

a#index:hover {
   color: #fff;
   background-color: #000;
}

.button {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #000000;
    border-radius: 10px;
    background-color: rgba(245, 245, 245, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}


/*mettre cette ligne, pour de l'ombre sur le button*/

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  text-decoration: none;
  outline: 0;
}

/**
 *  Typography
 *
 **/
.btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
  font-size: 1em;
  line-height: inherit;
}


h1, h2, h3,
h4, h5, h6 {
  font-family:"Poppins", sans-serif;
  color: #41261f;
  line-height: 1.25em !important;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: bold;
}

.h1, .h2, .h3,
.h4, .h5, .h6 {
  margin-bottom: 0;
  margin-top: 0;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #41261f;
}

h1, .h1 {
  font-size: 36px;
}

h2, .h2 {
  font-size: 30px;
}

h3, .h3 {
  font-size: 24px;
}

h4, .h4 {
  font-size: 18px;
}

h5, .h5 {
  font-size: 16px;
}

h6, .h6 {
  font-size: 14px;
  color: #000000;
}

td, th {
  border-radius: 0px;
}

h6#contact, .h6#contact {
  font-size: 16px;
  color: #000000;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clear::before, .clear::after {
  content: " ";
  display: table;
}

.clear::after {
  clear: both;
}

.fz-11 {
  font-size: 11px;
}

.fz-12 {
  font-size: 12px;
}

.fz-13 {
  font-size: 13px;
}

.fz-14 {
  font-size: 14px;
}

.fz-15 {
  font-size: 15px;
}

.fz-16 {
  font-size: 16px;
}

.fz-18 {
  font-size: 18px;
}

.fz-30 {
  font-size: 30px;
}

.fz-48 {
  font-size: 48px !important;
}

.fw100 {
  font-weight: 100;
}

.fw300 {
  font-weight: 300;
}

.fw400 {
  font-weight: 400 !important;
}

.fw500 {
  font-weight: 500;
}

.f700 {
  font-weight: 700;
}

.fsi {
  font-style: italic;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-150 {
  margin-top: 150px;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-5 {
  margin-left: 5px !important;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-50 {
  margin-left: 50px;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-15 {
  margin-right: 15px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-50 {
  margin-right: 50px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-0-i {
  margin-bottom: 0px !important;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

.pt-0 {
  padding-top: 0px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-150 {
  padding-top: 150px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pr-30 {
  padding-right: 30px;
}

.pl-30 {
  padding-left: 30px;
}

.p-20 {
  padding: 20px;
}

.p-30 {
  padding: 30px;
}

.p-40 {
  padding: 40px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.text-italic {
  font-style: italic;
}

.text-white {
  color: #fff;
}

.text-black {
  color: #000;
  font-weight: bold;
}

.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
}

.inline-flex {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.flex-grow {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.flex-wrap {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flex-left {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  justify-content: flex-start;
}

.flex-middle {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}

.flex-right {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  justify-content: flex-end;
}

.flex-top {
  -webkit-align-self: flex-start;
  -moz-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.flex-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
}

.flex-bottom {
  -webkit-align-self: flex-end;
  -moz-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.space-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  justify-content: space-between;
}

.space-around {
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  -moz-justify-content: space-around;
  justify-content: space-around;
}

.flex-column {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.flex-cell {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.display-table {
  display: table;
}

.relative {
  position: relative;
}

.container.fullwidth {
  width: 100%;
}

.container.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.no-padding {
  padding: 0;
}

.section-bg {
  background: #f9fafc;
}

@media (max-width: 767px) {
  .no-flex-xs {
    display: block !important;
  }
}

form {
width: 75%;
}
table {
width: 75%;
}
label {
width: 72%;
}
input, textarea {
width: 70%;
}

.apropos {
    wigth: 50%;
    height: auto
   }

.row.no-margin {
  margin-left: 0;
  margin-right: 0;
}

.text-heading {
  margin-bottom: 30px;
  font-size: 24px;
}

b, i, sup, sub, u, del {
  color: #ffffff;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 18px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
  
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.5em;
}

.section-top-border {
  padding: 70px 15px;
  border-top: 1px dotted #eee;
}

.single-gallery-image {
  margin-top: 30px;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  height: 200px;
}



.list-style {
  width: 14px;
  height: 14px;
}

.apropos {
    wigth: 50%;
    height: auto
   }

.menu-bar {
  cursor: pointer;
}

.main-menubar {
  position: static;
}

.main-wrapper-second {
  width: 68.75%;
  margin: 0 auto;
  margin-top: 1rem;
  border: 3mm ridge #cdcdcd;
  background-image: url(../img/f-bg.webp);
  background-size: cover;
}

.main-wrapper-second img {
  object-fit: contain;
  height: auto;
  max-width: 300px;
  width: 100%
}

.main-wrapper#politique {
  width: 90%;
  margin: 0 auto;
  margin-top: 1rem;
  border: 2mm ridge #cdcdcd;
  background-image: url(../img/f-bg5.webp);
}

@media (min-width: 1200px) {
.main-wrapper#politique {
    width: 80%;
  }
}

@media (max-width: 1199px) {
.main-wrapper#politique {
    margin-top: 3rem;
    width: 90%;
  }
}

@media (max-width: 767px) {
.main-wrapper#politique {
    margin-top: 3rem;
    width: 97%;
  border: 2mm ridge #cdcdcd;
  }
}


.main-wrapper#cgu {
  width: 90%;
  margin: 0 auto;
  margin-top: 1rem;
  border: 2mm ridge #cdcdcd;
  background-image: url(../img/f-bg5.webp);
}

@media (min-width: 1200px) {
.main-wrapper#cgu {
    width: 80%;
  }
}

@media (max-width: 1199px) {
.main-wrapper#cgu {
    margin-top: 3rem;
    width: 90%;
  }
}

@media (max-width: 767px) {
.main-wrapper#cgu {
    margin-top: 3rem;
    width: 97%;
  border: 2mm ridge #cdcdcd;
  }
}

.main-wrapper-first {
  width: 50%;
  margin: 0 auto;
  margin-top: 1rem;
  border: 3mm ridge #cdcdcd;
  background: url(../img/f-bgg.webp);
  background-size: cover !important;
}

@media (min-width: 1200px) {
  .main-wrapper-first {
    width: 80%;
  }
}

@media (max-width: 1199px) {
  .main-wrapper-first {
    margin-top: 3rem;
    width: 90%;
  }
}

@media (max-width: 767px) {
  .main-wrapper-first {
    margin-top: 3rem;
    width: 97%;
   border: 2mm ridge #cdcdcd;
  }
}

@media (min-width: 1200px) {
  .main-wrapper-second {
    width: 80%;
  }
}

@media (max-width: 1199px) {
  .main-wrapper-second {
    margin-top: 1rem;
    width: 90%;
  }
}

@media (max-width: 767px) {
  .main-wrapper-second {
    margin-top: 1rem;
    width: 97%;
  border: 2mm ridge #cdcdcd;
  }
}

.main-wrapper {
  width: 68.75%;
  margin: 0 auto;
  border: 2mm ridge #cdcdcd;
  background: url(../img/f-bg5.webp);
  padding-bottom: 30px;
  padding-top: 30px;
}

 .main-wrapper#legal img {
  object-fit: contain;
  height: auto;
  margin: 10px;
}

.main-wrapper#legal {
  background: url(../img/f-bg.webp);
}


.main-wrapper#gif {
  text-align: center;
}

@media (min-width: 1200px) {
  .main-wrapper {
    width: 80%;
  }
}

@media (max-width: 1199px) {
  .main-wrapper {
    margin-top: 1rem;
    width: 90%;
  }
}

@media (max-width: 767px) {
  .main-wrapper {
    margin-top: 1rem;
    width: 97%;
  border: 2mm ridge #cdcdcd;
  }
}

.about-area {
  width: 97%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  background-image: url(../img/f-bg.webp);
  background-size: cover;
  text-align:center;
  color: #000;
  border: 2mm ridge #ebe6d6
}

@media (min-width: 1200px) {
  .about-area {
    width: 80%;
   margin-right: auto;
   margin-left: auto;
  }
}

@media (max-width: 1199px) {
  .about-area {
    width: 90%;
   margin-right: auto;
   margin-left: auto;

  }
}

@media (max-width: 767px) {
  .about-area {
    width: 97%;
   margin-right: auto;
   margin-left: auto;
  }
}

  .footer-area {
  width: 97%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
  background-image: url(../img/f-bg.webp);
  background-size: cover;
  text-align:center;
  color: #000;
  border: 2mm ridge #ebe6d6
}

@media (min-width: 1200px) {
  .footer-area {
    width: 80%;
   margin-right: auto;
   margin-left: auto;
  }
}

@media (max-width: 1199px) {
  .footer-area {
    width: 90%;
   margin-right: auto;
   margin-left: auto;
  }
}

@media (max-width: 767px) {
  .footer-area {
    width: 97%;
   margin-right: auto;
   margin-left: auto;
  }
}

.section-gap {
  padding: 120px 0;
}

.section-title {
  padding-bottom: 30px;
}

.section-title h2 {
  margin-bottom: 5px;
}

.text-center {
  text-align: center;
}

@media (max-width: 767px) {
  .mt-sm-30 {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .mt-sm-20 {
    margin-top: 20px;
  }
}

.primary-btn {
  margin-bottom: 10px;
  line-height: 20px;
  padding: 10px;
  border-radius: 20px;
  background: #fff;
  outline: 2px ridge #000;
  color: #000;
  display: inline-block;
  font-weight: bold;
  position: relative;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  cursor: pointer;
  text-transform: uppercase;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}

.primary-btn:hover {
  background: #000;
  color: #fff;
}

@media (max-width: 767px) {
.primary-btn {
  outline: 1px ridge #000;
 }
}

.text-color-black {
  color: #000000;
}

.banner-content {
  font-weight: bold;
  color: #000000;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 2px;
}

.banner-content h1 {
  color: #41261f;
  font-weight: 650;
   font-size: 36px;
  }
}

.banner-content p {
  margin-top: 1rem;
}

.banner-content img {
  margin: 10px;
}

@media (max-width: 767px) {
  .banner-content {
    margin-top: 30px;
  .banner-content h1 {
    font-size: 25px;
  }
}

.banner-area {
  background-color: transparent;
}


.banner-area#contact {
  border: 3mm ridge #cdcdcd;
}

.featured-area {
  background-color: transparent;
}

 

  .single-feature {
    padding-top: 10px;
    padding-bottom: 10px;
  border: 2mm ridge #cdcdcd;
  }
}

 #feature {
    padding-top: 10px;
    padding-bottom: 10px;
   border: 2mm ridge #000;
  }

.single-feature h2 {
  font-size: 20px;
  font-weight: 650;
}

.single-feature a {
  font-weight: 400;
}

.single-feature p {
  margin-top: 1rem;
}

.single-feature img {
  border-radius: 2px;
}

.single-feature .desc {
  margin-left: 18px;
}

@media (max-width: 1024px) and (min-width: 768px) {
  .single-feature p {
    margin-bottom: 5px;
  }
  .single-feature img {
    height: 50%;
  }
}

@media (max-width: 768px) and (min-width: 768px) {
  .single-feature img {
    height: 75%;
  }
  .single-feature h2 {
    font-size: 14px;
  }
  .single-feature p {
    font-size: 10px;
    margin-top: 1px;
    line-height: 15px;
    margin-bottom: 0px;
  }
  .single-feature a {
    font-size: 10px;
  }
}

.image-gallery-area {
  background-color: transparent;
  text-align: -webkit-center;
}

.gallery-item {
  margin-left: 0;
  margin-right: 0;
}


@media (max-width: 767px) {
.about-area {
  position: relative;
  background-image: url(../img/f-bg.webp);
  background-size: cover;
  text-align:center;
  color: #000;
  border: 2mm ridge #ebe6d6
}
}

.about-area {
  border: 2mm ridge #ebe6d6;
  position: relative;
  background-image: url(../img/f-bg.webp);
  background-size: cover;
  color: #000;
  text-align: center;
}

.about-area  img {
  object-fit: contain;
  height: auto;
  max-width: 200px;
  width: 50%
  margin: 10px;
}

.about-area h1 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 18px;
  color: #000;
  text-align: center;
}

.about-area a, a:hover a:focus {
  text-decoration: none;
  outline: 0;
  color: #260ce9;
}

.about-left {
  padding-left: 25px;
  padding-right: 0;
}

.about-right {
  padding-left: 70px;
  padding-right: 70px;
}

@media (max-width: 768px) {
  .about-left img {
    width: 100%;
  }
}

.footer-area {
  border: 2mm ridge #ebe6d6;
  background-image: url(../img/f-bg.webp);
  background-size: cover;
  color: #000;
  margin-bottom: 90px;
  font-size:16px;
  line-height: 2em;
}

.footer-area  img {
  object-fit: contain;
  height: auto;
  max-width: 150px;
  width: 50%
  margin: 10px;
}

.footer-area i {
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.footer-area i:hover {
  color: #000;
}

.footer-area a:hover {
  color: #000 !important;
}

@media (max-width: 767px) {

    margin-top: 55px;
  }
}

.footer-area .footer-social {
  margin-top: 30px;
}

.footer-area .footer-social a {
  padding: 15px;
}


form {
  background: gray;
  /* Uniquement centrer le formulaire sur la page */
  max-width:400px;
  margin: 0 auto;
  width: 100%;
  height: 250px;
  /* Encadré pour voir les limites du formulaire */
  padding: 1em;
  border: 2px solid #CCC;
  border-radius: 1em;
  position: relative;
}

form div + div {
  margin-top: 1em;
}

table {
max-width: 400px;
margin: 0 auto;
width: 100%;
}

label {
  /* Pour être sûrs que toutes les étiquettes ont la même taille et sont correctement alignées */
  display: inline-block;
  max-width: 75px;
  width:100%;
  text-align: left;
  color: #000000;
  float: left;
}

input, textarea {
  /* Pour s'assurer que tous les champs texte ont la même police.
     Par défaut, les textarea ont une police monospace */
  font: 1em sans-serif;

  /* Pour que tous les champs texte aient la même dimension */
  max-width: 260px;
  width: 100%;
  box-sizing: border-box;
  float: right;

  /* Pour harmoniser le look & feel des bordures des champs texte */
  border: 2px solid #999;
  border-color: #000000
}

input:focus, textarea:focus {
  /* Pour souligner légèrement les éléments actifs */
  border-color: #000;
}

textarea {
  /* Pour aligner les champs texte multi-ligne avec leur étiquette */
  vertical-align: top;

  /* Pour donner assez de place pour écrire du texte */
  height: 5em;
}

input[type="button"]{
    cursor:pointer;
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #000000;
    border-radius: 10px;
    background-color: rgba(245, 245, 245, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6), inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.succes{
position: relative;
bottom:33%; top: auto;
font-family: "Poppins", sans-serif;
  color: #f90000;
text-align:center;
font-size: 35px;
margin: 0 auto;
}


.separator{
    display: block;
    width: 60%;
    height: 1px;
    background-color: #e9e9e9;
    margin: 0 auto;
    padding: 0;
    border: 0!important;
}

.separator-gallery{
    display: block;
    width: 60%;
    height: 3px;
    background-color: #e9e9e9;
    margin: 25 auto;
    padding: 0;
    border: 0!important;
}

main-menubar-left {
   position:absolute; top: 5px; left: 5px;
}

.description {
   text-align: center;
   color: #000000
}


/* Add a black background color to the top navigation */
.topnav {
  position:sticky;
  width: 80%;
  margin: 0 auto;
  margin-top: 1rem;
  border: 2mm ridge #cdcdcd;
  background: url(../img/f-bg1.webp);
  background-size: cover !important;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-radius: 2em;
}

button#topnav {
  outline: 3px ridge #2d0d0d;
  border-radius: 2em;
  padding:2px 6px;
  font-size: 12px;
  color: #000000;
  font-weight: 600;
  background-color: cdcdcd;
}

button#topnav:hover {
  color:#fff;
  background-color: #000;
}


/* Change the color of links on hover (background-color: #265c4b;)*/
.topnav a:hover {
 background-image: url('https://www.benji-metal.com/img/background.webp');
}

.topnav a:hover {
  background: transparent;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 768 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
 .topnav {
  width: auto;
  margin: 0 10px;
  margin-top: 1rem;
  border: 2mm ridge #cdcdcd;
  background: url(../img/f-bg5.webp);
  background-size: cover !important;
  overflow: hidden;
 }
}

--------------------------------------------------

/* Add a black background color to the top navigation */
.bottomnav {
  display: flex;
  justify-content: center;
  align-items: center;
}


@media screen and (min-width: 768px) {
.bottomnav {
  display: none;
}

.mybottomnav {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  height: 44px;
  width: 60%;
  border: 2mm ridge #ebe6d6;
  background-color: #dcdcdc;
  background-size: contain;
 }
}

@media screen and (max-width: 768px) {
.mybottomnav {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  height: 44px;
  width: 60%;
  border: 2mm ridge #ebe6d6;
  background-color: #dcdcdc;
  background-size: contain;
 }
}

 .bottomnav img {
  margin: 2px 15px;
}


figcaption {
  background-color: #000;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
  width: max-content;
}