@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/notosans/v11/o-0NIpQlx3QUlC5A4PNjXhFVZNyE.ttf) format('truetype');
}
html {
  font-size: 62.5% !important;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  color: inherit;
  vertical-align: baseline;
  list-style-type: none;
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}
h1 {
  font-size: 3rem;
}
h2 {
  font-size: 2.75rem;
}
h3 {
  font-size: 2.5rem;
}
h4 {
  font-size: 2.25rem;
}
h5 {
  font-size: 2rem;
}
h6 {
  font-size: 1.75rem;
}
html,
body {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
main {
  flex: 1;
  background: #d7cec7;
}
header {
  width: 100%;
  top: 0;
  position: sticky;
  background: #565656;
  z-index: 10000;
}
header h1 {
  text-align: center;
  color: #d7cec7;
}
header #menu {
  background: #c09f80;
}
header #menu li {
  color: #000000;
  border-color: #000000;
  vertical-align: middle;
  display: block;
  padding: 0;
}
header #menu li a {
  display: block;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
header #menu form {
  padding: 0.5rem;
}
header #menu form input {
  width: 100%;
  height: 100%;
  border: 1px solid #565656;
  border-radius: 1000px;
  outline: none;
  padding: 0.5rem;
}
header #menu form input:focus {
  box-shadow: 0 0 0.5rem 0.3rem #565656;
}
footer {
  flex-shrink: 0;
  width: 100%;
  background: #565656;
  display: flex;
  justify-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
  padding: 0.5rem;
}
footer section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border-color: #000000;
}
footer section h2 {
  color: #d7cec7;
}
.mainbox {
  background-color: #c09f80;
  border-color: #000000;
  border-radius: 1rem;
}
.link {
  font-style: italic;
  color: #76323f;
}
.highlight {
  font-weight: bold;
  color: #76323f;
}
.contentonly {
  display: contents;
}
a.hidden {
  cursor: default !important;
  color: inherit !important;
}
.gallery {
  position: relative;
  background: #000;
  height: 400px;
  text-align: center;
  vertical-align: middle;
}
@media (max-width: 500px) {
  .gallery {
    margin: 0;
    height: 244px;
  }
}
@media (max-width: 800px) {
  .gallery {
    margin: 0;
  }
}
@media (min-width: 801px) and (max-width: 1600px) {
  .gallery {
    margin: 0 5%;
  }
}
@media (min-width: 1601px) {
  .gallery {
    margin: 0 10%;
  }
}
.gallery > div {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  overflow: hidden;
  background: #000;
}
.gallery > div.start {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery > div.start a {
  font-size: 1.3rem;
  color: #fff;
}
.gallery > div.start a::before {
  content: "Start the gallery";
}
.gallery > div figure {
  height: 100%;
  width: 100%;
  vertical-align: middle;
}
.gallery > div figure img {
  max-height: 100%;
  max-width: 100%;
}
@media (min-width: 501px) {
  .gallery > div figure img {
    height: 100%;
  }
}
.gallery > div figure figcaption {
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding-bottom: 0.3rem;
  padding-top: 3rem;
  font-size: 1.2rem;
  color: #fff;
  box-shadow: inset black 0 -2rem 2rem -1rem;
  transition: box-shadow 0.2s;
}
.gallery > div figure figcaption:hover {
  box-shadow: inset black 0 -3rem 2rem -1rem;
}
.gallery > div > a {
  display: flex;
  height: 100%;
  top: 0;
  position: absolute;
  align-items: center;
}
.gallery > div > a::before {
  color: #fff;
  font-size: 6rem;
}
.gallery > div > a.next {
  right: 0;
}
.gallery > div > a.next::before {
  content: ">";
}
.gallery > div > a.prev {
  left: 0;
}
.gallery > div > a.prev::before {
  content: "<";
}
.gallery > div:target {
  display: block;
}
#index main .art {
  margin: 15px;
  padding: 5px;
  background-color: #c09f80;
  border-color: #000000;
  border-radius: 1rem;
}
#index main .art .left h2 {
  font-weight: bold;
  color: #76323f;
}
#index main .art p {
  padding: 15px;
  font-size: 2rem;
  align-self: center;
}
#index main .art p a {
  font-style: italic;
  color: #76323f;
}
@media screen and (max-width: 500px) {
  #menu {
    flex-direction: column;
    justify-items: center;
    max-height: 4.3rem;
    overflow: hidden;
    transition: max-height 0.5s;
  }
  #menu::before {
    display: block;
    content: 'Menu';
    font-size: 2.75rem;
    text-align: center;
    padding: 0.5rem 0;
  }
  #menu:hover,
  #menu:focus-within {
    max-height: 1000px;
  }
  #menu ul {
    flex-direction: column;
  }
  footer {
    flex-direction: column;
    align-items: center;
  }
  footer section + section {
    border-top: 1px solid;
  }
  body#ma_recherche h1 {
    text-align: center;
  }
  body#ma_recherche #recherche {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    width: 100%;
  }
  body#ma_recherche #recherche .result + div {
    border-top: 1px solid black;
  }
  body#ma_recherche #recherche .result:nth-child(even) {
    background-color: #cbb7a4;
  }
  body#ma_recherche #recherche .result a {
    display: block;
    width: 100%;
    max-height: 200px;
  }
  body#ma_recherche #recherche .result a img {
    float: left;
    max-width: 200px;
  }
  body#ma_recherche #recherche .result a .details {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1rem;
  }
  body#ma_recherche #recherche .result a .details .name {
    font-size: 2rem;
  }
  body#ma_recherche #recherche .result a .details .price {
    font-size: 1.5rem;
  }
  body#ma_recherche #recherche .result a .details .price::after {
    content: "€";
  }
  body#ma_recherche #recherche .result a .details .discount {
    font-size: 1.5rem;
    opacity: 0.5;
  }
  body#ma_recherche #recherche .result a .details .discount::before {
    content: '-';
  }
  body#ma_recherche #recherche .result a .details .discount::after {
    content: '%';
  }
  body#panier main h2 {
    text-align: center;
  }
  body#panier main section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    width: 100%;
  }
  body#panier main section h3 {
    padding-left: 5rem;
  }
  body#panier main section div {
    display: flex;
    flex-direction: row;
    justify-items: stretch;
  }
  body#panier main section div + div {
    border-top: 1px solid black;
  }
  body#panier main section div:nth-child(odd) {
    background-color: #cbb7a4;
  }
  body#panier main section div img {
    max-height: 200px;
    width: 200px;
  }
  body#panier main section div form {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1rem;
  }
  body#panier main section div form .name {
    font-size: 2rem;
    text-align: right;
  }
  body#panier main #confirm {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
  }
  body#panier main #confirm::before {
    display: block;
    height: 6rem;
    width: 100%;
    content: '';
    background-image: url("../assets/icons/Shopping_cart.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }
  body#commande h2 {
    text-align: center;
  }
  body#commande #panier {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  body#commande #panier h3 {
    padding-left: 5rem;
  }
  body#commande #panier section {
    padding-bottom: 2rem;
  }
  body#commande #panier section h4 {
    padding-left: 10rem;
  }
  body#commande #panier section a.contentonly:nth-child(odd) figure {
    background-color: #cbb7a4;
  }
  body#commande #panier section a.contentonly + a.contentonly figure {
    border-top: 1px solid black;
  }
  body#commande #panier section figure {
    display: flex;
    flex-direction: row;
    height: 200px;
  }
  body#commande #panier section figure img {
    max-width: 200px;
  }
  body#commande #panier section figure figcaption {
    font-size: 2rem;
    padding: 0.5rem;
  }
  body#commande #panier section figure figcaption::after {
    font-size: 1.5rem;
    content: ' x' attr(data-count);
  }
  body#commande #panier section span {
    font-size: 1.5rem;
    padding-left: 2rem;
  }
  body#commande #panier section span::after {
    font-size: 1.2rem;
    opacity: 0.5;
    content: ' ' attr(data-price) '€';
  }
  body#commande #panier > span {
    font-size: 1.5rem;
    padding-left: 1rem;
  }
  body#commande #panier > span::after {
    font-size: 1.2rem;
    opacity: 0.5;
    content: ' ' attr(data-price) '€';
  }
  body#commande #coordonnees {
    width: 75%;
    margin: 0 12.5%;
    padding: 1rem 0;
  }
  body#commande #coordonnees h3 {
    text-align: center;
  }
  body#commande #coordonnees form {
    display: flex;
    flex-direction: column;
  }
  body#commande #coordonnees form span {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    padding: 0 1%;
  }
  body#commande #coordonnees form span label {
    flex: 1;
    font-size: 1.2rem;
    text-align: center;
  }
  body#commande #coordonnees form span * {
    flex: 3;
  }
  body#article1 h2,
  body#article2 h2,
  body#article3 h2 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  body#article1 h3,
  body#article2 h3,
  body#article3 h3 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0.7rem;
  }
  body#article1 #images,
  body#article2 #images,
  body#article3 #images {
    width: 100%;
    padding: 1rem 0;
    max-height: 500px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  body#article1 #images img,
  body#article2 #images img,
  body#article3 #images img {
    max-height: calc(500px - 3rem);
  }
  body#article1 #images figcaption,
  body#article2 #images figcaption,
  body#article3 #images figcaption {
    text-align: center;
    font-size: 2rem;
  }
  body#article1 .addtocart,
  body#article2 .addtocart,
  body#article3 .addtocart {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
  }
  body#article1 .addtocart::after,
  body#article2 .addtocart::after,
  body#article3 .addtocart::after {
    padding-left: 0.2rem;
    content: '(' attr(data-price) ' €)';
  }
  body#article1 .addtocart[data-discount]::after,
  body#article2 .addtocart[data-discount]::after,
  body#article3 .addtocart[data-discount]::after {
    content: '(' attr(data-price) ' €, économisez ' attr(data-discount) '%)';
  }
  body#article1 .addtocart::before,
  body#article2 .addtocart::before,
  body#article3 .addtocart::before {
    display: block;
    height: 6rem;
    width: 100%;
    content: '';
    background-image: url("../assets/icons/Shopping_cart.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }
  body#article1 #caract,
  body#article2 #caract,
  body#article3 #caract {
    display: block;
    width: 90%;
    padding: 0 5%;
  }
  body#article1 #caract p,
  body#article2 #caract p,
  body#article3 #caract p {
    font-size: 1.3rem;
    text-align: justify;
  }
  body#article1 #caract a,
  body#article2 #caract a,
  body#article3 #caract a {
    font-style: italic;
    color: #76323f;
  }
  body#article1 #caract sup,
  body#article2 #caract sup,
  body#article3 #caract sup {
    vertical-align: super;
  }
  body#article1 #caract sup.cond,
  body#article2 #caract sup.cond,
  body#article3 #caract sup.cond {
    font-style: italic;
    color: #76323f;
    position: relative;
  }
  body#article1 #caract sup.cond:hover::before,
  body#article2 #caract sup.cond:hover::before,
  body#article3 #caract sup.cond:hover::before {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    content: attr(data-condition);
    min-width: 10rem;
    text-align: center;
    background-color: white;
    border: 1px solid silver;
    border-radius: 2px;
    color: black;
  }
  body#article1 main form,
  body#article2 main form,
  body#article3 main form {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  body#article1 main form span,
  body#article2 main form span,
  body#article3 main form span {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
  }
  body#article1 main form span span,
  body#article2 main form span span,
  body#article3 main form span span {
    flex: 3;
    flex-direction: row;
  }
  body#article1 main form span label,
  body#article2 main form span label,
  body#article3 main form span label {
    flex: 1;
    font-size: 1.3rem;
    text-align: center;
  }
  body#article1 main form span label:only-child,
  body#article2 main form span label:only-child,
  body#article3 main form span label:only-child {
    text-align: center;
  }
  body#article1 main form span input,
  body#article2 main form span input,
  body#article3 main form span input {
    flex: 3;
  }
  body#article1 main form span select,
  body#article2 main form span select,
  body#article3 main form span select {
    flex: 3;
  }
  body#article1 main form span textarea,
  body#article2 main form span textarea,
  body#article3 main form span textarea {
    flex: 1;
  }
  body#article1 #commentsection,
  body#article2 #commentsection,
  body#article3 #commentsection {
    display: block;
    width: 90%;
    padding: 1rem 5%;
    margin-bottom: 2rem;
  }
  body#article1 #commentsection p:only-child,
  body#article2 #commentsection p:only-child,
  body#article3 #commentsection p:only-child {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    color: #444;
  }
  body#article1 #commentsection p:only-child em,
  body#article2 #commentsection p:only-child em,
  body#article3 #commentsection p:only-child em {
    font-style: italic;
  }
  body#article1 #commentsection .comment,
  body#article2 #commentsection .comment,
  body#article3 #commentsection .comment {
    width: 100%;
    padding: 1rem 0;
  }
  body#article1 #commentsection .comment h4,
  body#article2 #commentsection .comment h4,
  body#article3 #commentsection .comment h4 {
    text-align: center;
  }
  body#article1 #commentsection .comment h4::after,
  body#article2 #commentsection .comment h4::after,
  body#article3 #commentsection .comment h4::after {
    content: ' ' attr(data-score) '/5';
    font-style: italic;
  }
  body#article1 #commentsection .comment p,
  body#article2 #commentsection .comment p,
  body#article3 #commentsection .comment p {
    text-align: justify;
    font-size: 1.3rem;
  }
  body#nous_contacter main h1 {
    text-align: center;
    margin-bottom: 2rem;
    margin-top: 1rem;
  }
  body#nous_contacter main ul {
    padding-left: 2rem;
  }
  body#nous_contacter main ul li {
    list-style-type: disc;
    font-size: 1.5rem;
  }
  body#nous_contacter main ul li a {
    font-style: italic;
    color: #76323f;
  }
  body#a_propos main {
    padding: 2rem;
  }
  body#a_propos main h1 {
    text-align: center;
    padding-bottom: 2rem;
  }
  body#a_propos main p {
    text-align: justify;
    font-size: 1.8rem;
    padding-bottom: 1rem;
  }
  body#a_propos main p a {
    font-style: italic;
    color: #76323f;
  }
  body#a_propos main ul {
    padding-left: 2rem;
  }
  body#a_propos main ul li {
    font-size: 1.6rem;
    list-style-type: disc;
  }
  body#a_propos main ul li code {
    font-family: "Fira Code", "Hack", monospace;
  }
  body#a_propos main ul li strong {
    font-weight: bold;
    color: #76323f;
  }
  body#a_propos main ul li em {
    font-style: italic;
  }
  body#index {
    /*--- index small ---*/
  }
  body#index main {
    padding: 30px;
  }
  body#index .wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    height: 100%;
    width: 100%;
  }
  body#index .wrapper .art {
    max-width: 500px;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  body#index .wrapper .art .left {
    display: flex;
    flex-direction: column;
  }
  body#index .wrapper .art .left img {
    max-width: 100%;
  }
}
@media screen and (min-width: 501px) {
  #menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #menu ul {
    display: flex;
    flex-direction: row;
  }
  #menu ul li {
    padding: 0 1rem;
  }
  #menu ul li + li {
    border-left: 1px solid;
  }
  footer section + section {
    border-left: 1px solid;
  }
  body#article1 h2,
  body#article2 h2,
  body#article3 h2 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  body#article1 h3,
  body#article2 h3,
  body#article3 h3 {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 0.7rem;
  }
  body#article1 #images,
  body#article2 #images,
  body#article3 #images {
    width: 80%;
    margin: 0 10%;
    max-height: 500px;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #c09f80;
    border-color: #000000;
    border-radius: 1rem;
  }
  body#article1 #images img,
  body#article2 #images img,
  body#article3 #images img {
    max-height: calc(500px - 3rem);
  }
  body#article1 #images figcaption,
  body#article2 #images figcaption,
  body#article3 #images figcaption {
    text-align: center;
    font-size: 2rem;
  }
  body#article1 .addtocart,
  body#article2 .addtocart,
  body#article3 .addtocart {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    margin: 1rem 0;
  }
  body#article1 .addtocart::after,
  body#article2 .addtocart::after,
  body#article3 .addtocart::after {
    padding-left: 0.2rem;
    content: attr(data-price) ' €';
  }
  body#article1 .addtocart[data-discount]::after,
  body#article2 .addtocart[data-discount]::after,
  body#article3 .addtocart[data-discount]::after {
    content: attr(data-price) ' € (économisez ' attr(data-discount) '%)';
  }
  body#article1 .addtocart::before,
  body#article2 .addtocart::before,
  body#article3 .addtocart::before {
    display: block;
    height: 4rem;
    width: 100%;
    content: '';
    background-image: url("../assets/icons/Shopping_cart.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }
  body#article1 #caract,
  body#article2 #caract,
  body#article3 #caract {
    display: block;
    width: 80%;
    margin: 0 10%;
    padding: 1rem 0;
    background-color: #c09f80;
    border-color: #000000;
    border-radius: 1rem;
  }
  body#article1 #caract p,
  body#article2 #caract p,
  body#article3 #caract p {
    font-size: 1.3rem;
    text-align: justify;
    padding: 0 1rem;
  }
  body#article1 #caract a,
  body#article2 #caract a,
  body#article3 #caract a {
    font-style: italic;
    color: #76323f;
  }
  body#article1 #caract sup,
  body#article2 #caract sup,
  body#article3 #caract sup {
    vertical-align: super;
  }
  body#article1 #caract sup.cond,
  body#article2 #caract sup.cond,
  body#article3 #caract sup.cond {
    font-style: italic;
    color: #76323f;
    position: relative;
  }
  body#article1 #caract sup.cond:hover::before,
  body#article2 #caract sup.cond:hover::before,
  body#article3 #caract sup.cond:hover::before {
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    content: attr(data-condition);
    min-width: 10rem;
    text-align: center;
    background-color: white;
    border: 1px solid silver;
    border-radius: 2px;
    color: black;
  }
  body#article1 main form,
  body#article2 main form,
  body#article3 main form {
    width: calc(100% - 2rem);
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
  }
  body#article1 main form span,
  body#article2 main form span,
  body#article3 main form span {
    display: flex;
    flex-direction: row;
  }
  body#article1 main form span span,
  body#article2 main form span span,
  body#article3 main form span span {
    flex: 3;
    flex-direction: row;
  }
  body#article1 main form span label,
  body#article2 main form span label,
  body#article3 main form span label {
    flex: 1;
    font-size: 1.3rem;
  }
  body#article1 main form span label:only-child,
  body#article2 main form span label:only-child,
  body#article3 main form span label:only-child {
    text-align: center;
  }
  body#article1 main form span input,
  body#article2 main form span input,
  body#article3 main form span input {
    flex: 3;
  }
  body#article1 main form span select,
  body#article2 main form span select,
  body#article3 main form span select {
    flex: 3;
  }
  body#article1 main form span textarea,
  body#article2 main form span textarea,
  body#article3 main form span textarea {
    flex: 1;
  }
  body#article1 #commentsection,
  body#article2 #commentsection,
  body#article3 #commentsection {
    display: block;
    width: 80%;
    margin: 2rem 10%;
    margin-bottom: 2rem;
    background-color: #c09f80;
    border-color: #000000;
    border-radius: 1rem;
  }
  body#article1 #commentsection p:only-child,
  body#article2 #commentsection p:only-child,
  body#article3 #commentsection p:only-child {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.6em;
    color: #444;
  }
  body#article1 #commentsection p:only-child em,
  body#article2 #commentsection p:only-child em,
  body#article3 #commentsection p:only-child em {
    font-style: italic;
  }
  body#article1 #commentsection .comment,
  body#article2 #commentsection .comment,
  body#article3 #commentsection .comment {
    width: calc(100% - 2rem);
    padding: 1rem;
  }
  body#article1 #commentsection .comment h4,
  body#article2 #commentsection .comment h4,
  body#article3 #commentsection .comment h4 {
    text-align: center;
  }
  body#article1 #commentsection .comment h4::after,
  body#article2 #commentsection .comment h4::after,
  body#article3 #commentsection .comment h4::after {
    content: ' ' attr(data-score) '/5';
    font-style: italic;
  }
  body#article1 #commentsection .comment p,
  body#article2 #commentsection .comment p,
  body#article3 #commentsection .comment p {
    text-align: justify;
    font-size: 1.3rem;
  }
  body#index main {
    padding: 50px;
  }
  body#index .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    height: 100%;
    width: 100%;
  }
  body#index .wrapper .art {
    max-width: 800px;
    min-width: 400px;
    max-height: 470px;
    display: flex;
    flex-wrap: nowrap;
  }
  body#index .wrapper .art .left {
    display: flex;
    flex-direction: column;
    width: 50%;
  }
  body#index .wrapper .art .left img {
    max-width: 400px;
  }
  body#ma_recherche h1 {
    text-align: center;
  }
  body#ma_recherche #recherche {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    width: 70%;
    margin-right: 20%;
    margin-left: 10%;
    background-color: #c09f80;
    border-color: #000000;
    border-radius: 1rem;
    overflow: hidden;
  }
  body#ma_recherche #recherche .result + div {
    border-top: 1px solid black;
  }
  body#ma_recherche #recherche .result:nth-child(odd) {
    background-color: #cbb7a4;
  }
  body#ma_recherche #recherche .result a {
    display: block;
    width: 100%;
    max-height: 200px;
  }
  body#ma_recherche #recherche .result a img {
    float: left;
    max-width: 200px;
  }
  body#ma_recherche #recherche .result a .details {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 1rem;
    padding-top: 0.5rem;
  }
  body#ma_recherche #recherche .result a .details .name {
    font-size: 2rem;
  }
  body#ma_recherche #recherche .result a .details .price {
    font-size: 1.5rem;
  }
  body#ma_recherche #recherche .result a .details .price::after {
    content: "€";
  }
  body#ma_recherche #recherche .result a .details .discount {
    font-size: 1.5rem;
    opacity: 0.5;
  }
  body#ma_recherche #recherche .result a .details .discount::before {
    content: '-';
  }
  body#ma_recherche #recherche .result a .details .discount::after {
    content: '%';
  }
  body#commande h2 {
    text-align: center;
  }
  body#commande #panier {
    width: 80%;
    margin: 0 10%;
    background-color: #c09f80;
    border-color: #000000;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body#commande #panier h3 {
    padding-left: 5rem;
  }
  body#commande #panier section {
    padding-bottom: 2rem;
  }
  body#commande #panier section h4 {
    padding-left: 10rem;
  }
  body#commande #panier section a:last-of-type figure {
    border-bottom: 1px solid black;
  }
  body#commande #panier section a:nth-child(even) figure {
    background-color: #cbb7a4;
  }
  body#commande #panier section figure {
    display: flex;
    flex-direction: row;
    height: 200px;
    border-top: 1px solid black;
  }
  body#commande #panier section figure img {
    max-width: 200px;
  }
  body#commande #panier section figure figcaption {
    font-size: 2rem;
    padding: 0.5rem;
  }
  body#commande #panier section figure figcaption::after {
    font-size: 1.5rem;
    content: ' x' attr(data-count);
  }
  body#commande #panier section span {
    font-size: 1.5rem;
    padding-left: 2rem;
  }
  body#commande #panier section span::after {
    font-size: 1.2rem;
    opacity: 0.5;
    content: ' ' attr(data-price) '€';
  }
  body#commande #panier > span {
    font-size: 1.5rem;
    padding-left: 1rem;
  }
  body#commande #panier > span::after {
    font-size: 1.2rem;
    opacity: 0.5;
    content: ' ' attr(data-price) '€';
  }
  body#commande #coordonnees {
    width: 80%;
    margin: 2rem 10%;
    padding: 1rem 0;
    background-color: #c09f80;
    border-color: #000000;
    border-radius: 1rem;
  }
  body#commande #coordonnees h3 {
    padding-left: 5rem;
  }
  body#commande #coordonnees form {
    display: flex;
    flex-direction: column;
  }
  body#commande #coordonnees form span {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
  }
  body#commande #coordonnees form span label {
    flex: 1;
    font-size: 1.2rem;
  }
  body#commande #coordonnees form span * {
    flex: 3;
  }
  body#nous_contacter main {
    padding: 2rem;
  }
  body#nous_contacter main h1 {
    text-align: center;
    padding-bottom: 2rem;
  }
  body#nous_contacter main ul {
    padding-left: 2rem;
  }
  body#nous_contacter main ul li {
    list-style-type: disc;
    font-size: 1.5rem;
  }
  body#nous_contacter main ul li a {
    font-style: italic;
    color: #76323f;
  }
  body#a_propos main {
    padding: 2rem;
  }
  body#a_propos main h1 {
    text-align: center;
    padding-bottom: 2rem;
  }
  body#a_propos main p {
    text-align: justify;
    font-size: 1.8rem;
    padding-bottom: 1rem;
  }
  body#a_propos main p a {
    font-style: italic;
    color: #76323f;
  }
  body#a_propos main ul {
    padding-left: 2rem;
  }
  body#a_propos main ul li {
    font-size: 1.6rem;
    list-style-type: disc;
  }
  body#a_propos main ul li code {
    font-family: "Fira Code", "Hack", monospace;
  }
  body#a_propos main ul li strong {
    font-weight: bold;
    color: #76323f;
  }
  body#a_propos main ul li em {
    font-style: italic;
  }
  body#panier main h2 {
    text-align: center;
  }
  body#panier main section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-content: stretch;
    width: 80%;
    margin: 1rem 10%;
    background-color: #c09f80;
    border-color: #000000;
    border-radius: 1rem;
    overflow: hidden;
  }
  body#panier main section h3 {
    padding-left: 5rem;
  }
  body#panier main section div {
    display: flex;
    flex-direction: row;
    justify-items: stretch;
    border-top: 1px solid black;
  }
  body#panier main section div:nth-child(even) {
    background-color: #cbb7a4;
  }
  body#panier main section div img {
    max-height: 200px;
    width: 200px;
  }
  body#panier main section div form {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 1rem;
    padding-top: 0.5rem;
  }
  body#panier main section div form .name {
    font-size: 2rem;
  }
  body#panier main #confirm {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
  }
  body#panier main #confirm::before {
    display: block;
    height: 4rem;
    width: 100%;
    content: '';
    background-image: url("../assets/icons/Shopping_cart.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }
}