/* 
FONTS UTILISABLES
font-family:system-ui,sans-serif;
font-family:sans-serif;
font-family:monospace;
font-family: 'Ibarra Real Nova', serif;
font-family: 'Nunito', sans-serif;
font-family: 'Nunito Sans', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Rubik', sans-serif;
font-family: 'Inconsolata', monospace;
font-family: 'Noto Sans Mono', monospace;
*/
:root {
  --font-title: "Ibarra Real Nova", serif;
  --font-home-title: "Nunito Sans", sans-serif;
  --font-home-text: "Nunito Sans", sans-serif;
  --font-text: "Nunito", sans-serif;
  --font-text-variant: "Quicksand", sans-serif;
  --font-main-menu-links: "Rubik", sans-serif;
  --font-chat: "Inconsolata", monospace;
  --font-tags: "Noto Sans Mono", monospace;
  --color-white-9: #f9f9f9;
  --color-white-9-shadow: 0, 0%, 98%;
  --fushia-clair: #edb0c2;
  --fushia-mid: #db7894;
  --fushia-fonce: #9a234b;
  --fushia-impact: #ba296a;
  --fushia-etiquette: #db5089;
  --anis-clair: #c2d2a3;
  --anis-mid: #a3c0a1;
  --anis-fonce: #7ca557;
  --gris-bleu: #9ab1b9;
  --gris-bleu-clair: rgb(194, 221, 229);
  --green-color: #aaad28;
  --ruban-vert: #8fbe3c;
  --ruban-fushia: #c73a65;
  --ruban-fushia-shadow: 342, 56%, 50%;
  --linear-fuschia1: linear-gradient(to top, #edb0c255, #db789435);
  --linear-fuschia2: linear-gradient(to top, #edb0c265, #db789435);
  --linear-diagonalgoldie: linear-gradient(
    to top right,
    #ac865c 50%,
    #ac865c55
  );
  --linear-diagonalfushia: linear-gradient(
    to top right,
    #9a234b85 50%,
    #9a234b55
  );
  --color-final-darkblue: #192361;
  --color-final-lightblue: #505cad;
  --color-final-lightgold: #fae08c;
  --color-final-gold: #ad974f;
  --color-final-darkgold: #8e793e;
  --color-final-lightred: #d54143;
  --color-final-red: #d12e31;
  --color-final-darkred: #ad3640;
  --color-final-lightblack: #1d1b1b;
  --color-final-black: #181616;
  --color-final-darkbrown: #231f20;
  --color-final-grey: #eaeaea;
  --color-final-greyblue: #d3e2eb;
  --color-cheddar: #ff7243;
  --warning-background-color: #ff7243;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-darkpurple: #2e1f54;
  --color-purple: #52057f;
  --color-pink: #cd004b;
  --color-darkorange: #ed3b21;
  --color-orange: #ff6908;
  --color-red: #f00a36;
  --color-yellow: #fcb711;
  --color-lightgreen: #dbeede;
  --color-green: #598c14;
  --color-darkgreen: #335238;
  --color-darkgrayblue: #417481;
  --color-graygreen: #3bb09a;
  --color-graygreen-shadow: #3bb09a80;
  --color-darkgraygreen: #46a493;
  --color-lightgraygreen: #40bfa8;
  --color-grayblue: #4a8594;
  --color-grayblue-shadow: #4b869533;
  --color-lightgrayblue-shadow: #4b869514;
  --color-darkblue: #051736;
  --warning-text-color: var(--color-black);
  --cta-color: var(--color-darkbrown);
  --cta-text-color-hover: var(--color-black);
  --cta-color-hover: var(--color-ultralightbrown);
  --color-validation: #19e6c0;
  --color-validation-hover: #8cf2e0;
  --color-error: #e61919;
  --color-error-hover: #f28c8c;
  --color-chat-actual-user: #d9e5e8;
  --color-chat-actual-user-hover: #d0dfe2;
  --color-chat-target-user: #d9e8e0;
  --color-chat-target-user-hover: #cce0d6;
  --color-footer: #e8eded;
  --color-logo-back: #d6f5edff;
  --color-logo-back-hover: #e2f8f3;
  --color-graywhite: #e2e9e9;
  --color-lightgraywhite: #e5ebeb;
  --color-darkgraywhite: #e6e6e6;
  --color-darkbrown: #423b34;
  --color-brown: #706357;
  --color-lightbrown: #b0a696;
  --color-ultralightbrown: #cac4b9;
  --color-lightgray: #dbe0e3;
}

*,
*::before,
*::after {
  max-width: 100%;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-text);
  font-size: 1.01rem;
  font-weight: 500;
  line-height: 1.85;
  word-wrap: break-word;
  word-break: break-word;
}

*:not(ul, ol),
*:not(ul, ol)::before,
*:not(ul, ol)::after {
  margin: 0;
  padding: 0;
}

::selection {
  background-color: var(--anis-clair);
  color: var(--color-black);
}

.las::selection {
  background-color: transparent;
  color: inherit;
}

:root::-webkit-scrollbar {
  width: 15px;
  height: auto;
  background-color: var(--anis-clair);
  border-radius: 50px;
}

:root::-webkit-scrollbar-thumb {
  background: var(--anis-fonce);
}

body {
  /* overflow-x:hidden; */
  position: relative;
  padding-block: 0;
  background-color: var(--anis-mid);
}

h1,
h1 span,
h2,
h2 span,
h3,
h3 span,
h4,
h4 span,
h5,
h5 span,
h6,
h6 span {
  font-family: var(--font-home-title);
  font-weight: 700 !important;
  line-height: 1.75;
  padding: 0.1rem 0.2rem;
}
h1,
h1 span {
  font-size: 1.7rem !important;
}
h2,
h2 span {
  font-size: 1.45rem !important;
}
h3,
h3 span {
  font-size: 1.35rem !important;
}
h4,
h4 span {
  font-size: 1.3rem !important;
}
h5,
h5 span {
  font-size: 1.25rem !important;
}
h6,
h6 span {
  font-size: 1.225rem !important;
}

p {
  font-family: var(--font-home-text);
  padding: 0.1rem 0.2rem;
  margin-block: .75rem;
}

li,
span {
  font-family: var(--font-home-text);
}

img {
  display: block;
}

button {
  cursor: pointer;
}

ul,
ol {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem;
}

a,
a:visited {
  color: var(--color-final-black);
}

b {
  font-weight: 700;
}

summary {
  padding: 0.1rem 0.25rem;
  cursor: pointer;
}

form {
  width: 40rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem;
  margin-inline: auto;
  overflow: hidden;
}

form > label {
  width: calc(100% - 1rem);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  margin-block: 0.75rem 0;
  cursor: pointer;
  font-weight: 600;
}

form > textarea {
  width: 100%;
  height: 6rem;
  resize: none;
  padding: 0.25rem 0.35rem;
}

form > input:not([type="submit"]),
form > select {
  width: calc(100% - 1rem);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  margin-inline: auto;
  border: none;
  box-shadow: inset 0 0 0 0.5px var(--color-black);
  padding: 0.25rem 0.35rem;
  outline: none;
}

form > input:not([type="submit"]):hover,
form > select:hover {
  box-shadow: inset 0 2px 1px -2px var(--color-black),
    inset 0 -2px 1px -2px var(--color-black),
    inset 2px 0 1px -2px var(--color-black),
    inset -2px 0 1px -2px var(--color-black);
}

form > input:not([type="submit"]):focus,
form > select:focus {
  box-shadow: inset 0 2px 1px -2px var(--color-black),
    inset 0 -2px 1px -2px var(--color-black), inset 2px 0 0 0 var(--color-black),
    inset -2px 0 1px -2px var(--color-black);
}

form > fieldset.inputs-group {
  width: max-content;
  display: block;
  gap: 0.5rem;
  border: none;
  box-shadow: inset 0 2px 1px -2px var(--color-black),
    inset 0 -2px 1px -2px var(--color-black),
    inset 2px 0 1px -2px var(--color-black),
    inset -2px 0 1px -2px var(--color-black);
  padding: 0.75rem 0;
  margin-block: 1.5rem 0.5rem;
  margin-inline: auto;
}

form > fieldset.inputs-group > legend {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  background-color: var(--color-white);
  box-shadow: inset 0 2px 1px -2px var(--color-black),
    inset 0 -2px 1px -2px var(--color-black),
    inset 2px 0 1px -2px var(--color-black),
    inset -2px 0 1px -2px var(--color-black);
  font-weight: 600;
}

form > fieldset.inputs-group > .label-radio {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background-color: inherit;
  cursor: pointer;
}

form > fieldset.inputs-group > .label-radio > input[type="radio"] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-inline: 0 0.25rem;
}

form > button,
form > input[type="submit"] {
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-block: 1rem 0.5rem;
  margin-inline: auto;
  padding: 0.25rem 0.35rem;
  border: none;
  background-color: var(--color-white);
  color: var(--color-darkpurple);
  box-shadow: 0 0 0 0 var(--color-black),
    inset 0 0 0 0.5px var(--color-darkpurple);
  cursor: pointer;
  font-family: var(--font-tags);
  font-size: 0.8rem;
  font-weight: 600;
  transition: box-shadow 0.175s ease-in-out, background-color 0.075s ease-in-out,
    color 0.075s ease-in-out;
}
form > button:hover,
form > input[type="submit"]:hover,
form > button:focus,
form > input[type="submit"]:focus {
  box-shadow: 0 0 0 0.5px var(--color-black),
    inset 0 0 0 0.5px var(--color-black);
}
form > button:active,
form > input[type="submit"]:active {
  background-color: var(--color-darkpurple);
  color: var(--color-white);
}

/*
 Form > ul > li dedicated
 */

.list-form {
  width: 400px;
  margin: 1rem auto;
  background: var(--color-chat-actual-user);
  border-radius: 2px;
  padding: 20px;
  font-family: Georgia, "Times New Roman", Times, serif;
}

form span img {
  width: 150px;
  margin-inline: auto;
  border-radius: 3px;
  padding: 0.25rem;
}

.table-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-inline: auto;
  padding: 0.25rem;
}

.table-form > ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  justify-content: center;
  align-items: flex-end;
}

form h1,
form h2,
form h3,
form h4,
form h5,
form h6 {
  display: block;
  text-align: center;
  padding: 0;
  margin: 0px 0px 20px 0px;
  color: var(--color-final-lightblue);
  font-size: x-large;
}

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

form li {
  display: block;
  padding: 9px;
  border: 1px solid var(--color-lightgray);
  background-color: var(--color-white);
  margin-bottom: 30px;
  border-radius: 3px;
  position: relative;
}

form li:last-child {
  border: none;
  margin-bottom: 0px;
  text-align: center;
  background-color: transparent;
}

form li > label {
  display: block;
  float: left;
  margin-top: -18px;
  background: var(--color-white);
  padding: 0.15rem 0.25rem;
  color: var(--color-final-lightblue);
  font-size: 12px;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--color-lightgray);
}

form li:focus-within > label {
  color: var(--color-final-black);
}

form li > input[type="text"],
form li > input[type="date"],
form li > input[type="datetime"],
form li > input[type="email"],
form li > input[type="number"],
form li > input[type="search"],
form li > input[type="time"],
form li > input[type="url"],
form li > input[type="password"],
form li > input[type="file"],
form li > textarea,
form li > select {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  display: block;
  outline: none;
  border: none;
  height: 2rem;
  line-height: 1.5;
  font-size: 1rem;
  font-weight: 400;
  margin-block: 0.25rem;
  padding: 0.15rem;
  background-color: var(--color-white);
  color: var(--color-final-darkblue);
}

form li > span {
  background: var(--color-white);
  display: block;
  padding: 0.25rem;
  margin: 0 -9px -9px -9px;
  text-align: center;
  color: var(--color-final-darkblue);
  font-size: 0.65rem;
}

form li > textarea {
  height: 15rem;
  resize: none;
  margin-block: 0.5rem;
}

form li > input[type="submit"],
form li > input[type="button"],
form li > button[type="submit"] {
  background: var(--color-final-lightblue);
  border: none;
  margin-inline: auto;
  padding: 10px 20px 10px 20px;
  border-bottom: 3px solid var(--color-final-darkblue);
  border-radius: 3px;
  color: var(--color-white);
  cursor: pointer;
  transition: color 0.125s ease-out, background-color 0.125s ease-out,
    border-bottom 0.125s ease-out;
}

form li > input[type="submit"]:hover,
form li > input[type="button"]:hover,
form li > button[type="submit"]:hover {
  background: var(--color-final-darkblue);
  color: var(--color-white);
}

form li > input[type="submit"]:active,
form li > input[type="button"]:active,
form li > button[type="submit"]:active {
  border-bottom: 3px solid transparent;
}

.preview-img {
  -webkit-aspect-ratio: 1920/903;
  -moz-aspect-ratio: 1920/903;
  -o-aspect-ratio: 1920/903;
  aspect-ratio: 1920/903;
  object-fit: cover;
}
/*
 End Form > ul > li dedicated
 */

table {
  width: 100%;
  display: block;
  box-shadow: 0 0 0 1px var(--color-grayblue-shadow);
  border-collapse: collapse;
  overflow-x: auto;
}

table > tbody,
table > thead,
table > tfoot {
  width: 100%;
  display: block;
}

table > tbody > tr {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  gap: 0.5rem;
  box-shadow: 0 1px 0 0 var(--color-grayblue-shadow);
  opacity: 0.95;
  background-color: transparent;
  cursor: crosshair;
  transition: background-color 0.125s ease-in-out, opacity 0.125s ease-in-out;
}
table > tbody > tr:hover {
  background-color: var(--color-grayblue-shadow);
  opacity: 1;
}

table > tbody > tr > th,
table > tbody > tr > td {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
  word-wrap: break-word;
  word-break: break-word;
}

.table-form-td {
  box-shadow: 0 -1px 0 0 var(--color-grayblue-shadow);
  grid-column: 1/-1;
}

table > tbody > tr > th {
  font-weight: 700;
}

table > tbody > tr > th:not(:last-child),
table > tbody > tr > td:not(:last-child) {
  box-shadow: 1px 0 0 0 var(--color-grayblue-shadow);
}

table > tbody > tr > td:last-child {
  justify-content: center;
  text-align: center;
}

table > tbody > tr > td > img {
  width: 250px;
  border-radius: 3px;
}

.inline-infos {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.no-gap-sections {
  gap: 0;
}

.no-padding-sections {
  padding: 0;
}

small{
  font-size:.85rem;
  font-weight:400;
  font-style:italic;
}

.important {
  color: var(--fushia-impact);
  font-weight: 700;
  font-size: 1.1rem;
  font-family: var(--font-text-variant);
  letter-spacing: 0.075rem;
  text-shadow: 0px 1px 2px var(--color-white);
}

.main-head {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: var(--fushia-etiquette);
  background-image: url("/assets/images/rework/framboise.jpg");
  background-size: cover;
  background-position: center 35%;
  background-repeat: repeat;
  position: relative;
}

.logo-link {
  width: max-content;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  margin-block: 0.5rem;
}

.logo {
  width: 100%;
  height: auto;
  -webkit-preserve-ratio: none;
  -webkit-aspect-ratio: 200/97.5;
  -moz-aspect-ratio: 200/97.5;
  -o-aspect-ratio: 200/97.5;
  aspect-ratio: 200/97.5;
  margin: auto;
  object-fit: contain;
}

.main-head-title {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  margin-inline: auto;
  font-weight: 700;
  letter-spacing: 0.075rem;
  font-size: 2.5rem;
  padding: 1rem 0.75rem 1.5rem 0.75rem;
  font-family: var(--font-text-variant);
  color: var(--color-black);
  background-color: var(--anis-mid);
}

.main-nav {
  width: 100vw;
  display: block;
  margin-inline: auto;
  position: fixed;
  bottom: 0;
  z-index: 1001;
  overflow: hidden;
  padding: 0 0.25rem;
  pointer-events:none;
}

.main-menu {
  width: max-content;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-inline: auto 0;
  margin-block: 0;
  overflow-y: auto;
  background-color: hsl(var(--ruban-fushia-shadow), 0.7);
  -moz-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  mix-blend-mode: multiply;
  pointer-events:all;
}

.main-menu-items {
  width: max-content;
  display: block;
  text-align: center;
  position: relative;
}

a.main-menu-links,
a.main-menu-links:visited {
  width: 100%;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  background-color: var(--fushia-impact);
  font-family: var(--font-main-menu-links);
  font-weight: 500;
  color: var(--color-white);
  text-shadow: 0 1px 1px var(--color-black);
  letter-spacing: 0.075rem;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
  border-radius: 3px;
  transition: background-color 0.125s ease-out;
}

a.main-menu-links:hover {
  background-color: var(--fushia-etiquette);
}

a.main-menu-links::before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("/assets/images/rework/coco.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

a.main-menu-links::after {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url("/assets/images/rework/coco.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-content {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 2.5rem;
  padding-inline: 0.75rem;
  padding-block: 2rem;
}

.main-sections {
  width: 65rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 3rem;
  margin-inline: auto;
  padding: 1rem 0.75rem;
  background-color: var(--color-lightgrayblue-shadow);
}

.admin-form-sections {
  background-color: hsl(var(--color-white-9-shadow), 0.5);
}

.main-sections-title {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem 0.5rem;
}

.entreprise-title {
  width: 40rem;
  background-color: hsl(var(--color-white-9-shadow), 0.85);
  padding: 0.25rem 0.5rem;
  margin-inline: auto;
  flex-direction: row;
  justify-content: center;
  text-align: center;
  border-radius: 3px;
  box-shadow: inset 0 0 3px 0 var(--fushia-mid);
}

.entreprise-description {
  width: 40rem;
  padding: 1rem 1.5rem;
  margin-inline: auto;
  background-color: hsl(var(--color-white-9-shadow), 0.85);
  text-align: left;
  border-radius: 3px;
  box-shadow: inset 0 0 3px 0 var(--fushia-mid);
}

.main-articles {
  width: 100%;
  padding: 1.25rem 1rem;
}

.created-articles{
  width:40rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  margin-inline:auto;
  margin-block:.5rem;
  border-radius:6px;
  background-color:hsla(var(--color-white-9-shadow),.35);
  box-shadow:0 1px 6px -3px var(--color-brown);
  transition:background-color .125s ease-out;
}
.created-articles:hover{
  background-color:hsla(var(--color-white-9-shadow),.5);
}

.created-article-image{
  width:350px;
  max-height:350px;
  /* object-fit:cover; */
  object-fit:contain;
  object-position:center;
  aspect-ratio:1/1;
  border-radius:3px;
  margin-inline:auto;
  margin-block:1.5rem;
  background-color:transparent;
}

.produit-phare {
  width: 40rem;
  background-color: var(--ruban-vert);
  background: linear-gradient(
    to top left,
    var(--anis-fonce) 20%,
    var(--anis-fonce) 30%,
    var(--ruban-vert) 20%
  );
  border-radius: 6px;
  border: 5px solid var(--fushia-impact);
  margin-inline: auto;
}

.produit-phare-title {
  width: max-content;
  text-align: center;
  display: grid;
  grid-template-columns: 18px 1fr 18px;
  grid-auto-rows: minmax(1.25rem, auto);
  grid-auto-flow: row dense;
  gap: 0.5rem;
  margin-inline: auto;
}

.produit-phare-title .produit-phare-important {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.icon-cannele-picard {
  width: 18px;
  height: 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.produit-phare-content {
  width: 30rem;
  text-align: center;
  padding: 0.5rem 1rem;
  margin-inline: auto;
}

.produit-phare-aside {
  width: 20rem;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 1px 6px 0px var(--color-final-black);
  margin-inline: auto;
  -webkit-aspect-ratio: 4/3;
  -moz-aspect-ratio: 4/3;
  -o-aspect-ratio: 4/3;
  aspect-ratio: 4/3;
}

.produit-phare-image {
  width: 100%;
  height: auto;
  -webkit-aspect-ratio: 4/3;
  -moz-aspect-ratio: 4/3;
  -o-aspect-ratio: 4/3;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
}

.image-galery {
  background-color: hsl(var(--color-white-9-shadow), 0.5);
}

.img-list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: no-wrap;
  margin: 0;
  padding: 25px;
  overflow-x: hidden;
  position: relative;
  background: var(--ruban-vert);
  border-radius: 6px;
  cursor: pointer;
}

.img-list-container {
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0.25rem;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-gap: 5px;
  grid-auto-rows: minmax(150px, auto);
  overflow-x: auto;
  overflow-y: hidden;
}

.img-list-container::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: var(--anis-clair);
  border-radius: 50px;
}

.img-list-container::-webkit-scrollbar-thumb {
  background: var(--ruban-fushia);
  border-radius: 50px;
}

.img-list-items {
  width: 150px;
  height: 150px;
  display: inline-block;
  padding: 0.1rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}

.images-list {
  width: 150px;
  height: auto;
  min-height: 150px;
  max-height: 150px;
  margin: 0;
  padding: 0;
  border: 5px solid #fff;
  border-radius: 15px;
  object-fit: cover;
  object-position: center;
  -webkit-aspect-ratio: 150/150;
  -moz-aspect-ratio: 150/150;
  -o-aspect-ratio: 150/150;
  aspect-ratio: 150/150;
}

.images-list:hover {
  filter: brightness(120%);
  border: 2px solid #fff;
  box-shadow: 0px 0px 10px var(--ruban-fushia);
  cursor: url("../assets/images/rework/linkselect.cur"), pointer;
}

.image-overlay-container {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 15px;
  background: #d9d9d9;
  position: relative;
}

.image-overlay {
  width: 450px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  -webkit-aspect-ratio: 4/3;
  -moz-aspect-ratio: 4/3;
  -o-aspect-ratio: 4/3;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
}

.image-overlay-description {
  max-width: 40rem;
  margin: 0;
  padding: 15px;
  font-family: "Gotham Light", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.tarifs-ce {
  width: 40rem;
  margin-inline: auto;
  text-align: center;
  background-color: var(--ruban-vert);
  border-radius: 6px;
  box-shadow: 0 2px 6px -1px var(--anis-fonce);
}

.tarifs-ce-title {
  color: #fff;
  text-decoration: none;
  font-family: "Gotham Medium", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px var(--color-final-black);
}

.tarifs-ce-content {
  max-width: 100%;
  margin: 0 auto;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
  font-family: "Gotham Medium", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ruban-fushia);
  text-shadow: 1px 1px 1px var(--color-white);
}

.infos {
  background-color: hsl(var(--color-white-9-shadow), 0.85);
}

.infos-content {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.5rem auto;
  padding: 0.5rem;
}

.horaires-fieldset,
.contact-fieldset,
.localisation-fieldset {
  width: 30rem;
  margin: 0.75rem auto;
  padding: 0.5rem;
  border: 2px solid var(--fushia-etiquette);
  border-radius: 6px;
}

.horaires-legend,
.contact-legend,
.localisation-legend {
  margin: 0 auto;
  padding: 0.25rem 0.5rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--fushia-impact);
}

.horaires-list,
.contact-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  padding: 0.25rem;
}

.horaires-list-items,
.contact-list-items {
  list-style: none;
  margin: 0.5rem auto;
  line-height: 2;
  padding: 0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05rem;
  color: var(--fushia-impact);
}

.horaires-heures,
.contact-infos {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  color: var(--fushia-etiquette);
  text-transform: none;
}

.contact-fb-link,
.contact-tel-link,
.contact-mail-link {
  text-decoration: none;
  border-bottom: 1px solid var(--anis-fonce);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  color: var(--anis-fonce);
  text-transform: none;
  transform: color 0.125s ease-out;
}

.contact-fb-link:hover,
.contact-tel-link:hover,
.contact-mail-link:hover {
  cursor: pointer;
  color: var(--ruban-fushia);
}

#mapid {
  width: 100%;
  height: 300px;
  border-radius: 6px;
}

.main-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 0.5rem 0.75rem;
  background-color: var(--anis-clair);
  box-shadow: inset 0 -150px 0 0 var(--ruban-fushia);
  padding-bottom: 180px;
}

.footer-sections {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 1.75rem;
}

.footer-sections-title {
  width: 100%;
  margin: 0;
  padding: 0.25rem 0.5rem;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-text-variant);
  font-weight: bold;
}

.footer-sections-description {
  width: 100%;
  margin: 0;
  padding: 0.25rem 0.5rem;
  text-align: center;
  font-size: 0.95rem;
  letter-spacing: 0.025rem;
  font-weight: 500;
}

.ml-line {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  padding: 0.25rem 0;
}

.ml-copyright {
  width: 50%;
  margin: 0 auto;
  padding: 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  color: var(--fushia-etiquette);
  text-transform: none;
  text-align: left;
}

a.ml-link,
a.ml-copyright,
a.home-link {
  text-decoration: none;
  max-width: 50%;
  margin: 0 auto;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  color: var(--fushia-impact);
  text-transform: none;
  transition: color 0.125s ease-out;
}

a.ml-link {
  order: 2;
  text-align: right;
}

a.home-link {
  order: 2;
  text-align: right;
}

a.ml-copyright {
  order: 1;
  text-align: left;
}

a.ml-link:hover,
a.ml-copyright:hover,
a.home-link:hover {
  cursor: pointer;
  color: var(--fushia-etiquette);
}

a.ml-fieldset {
  min-width: 50%;
  margin: 0.5rem auto;
  padding: 0.75rem;
  border: 2px solid var(--fushia-etiquette);
  border-radius: 6px;
}

a.ml-legend {
  margin: 0 auto;
  padding: 0.25rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--fushia-impact);
}

a.ml-text,
a.sub-ml-text {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  color: var(--fushia-etiquette);
  text-transform: none;
}

a.sub-ml-title {
  margin: 0 auto;
  padding: 0.25rem 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--fushia-impact);
}

a.ml-text a,
a.sub-ml-text a {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  color: var(--anis-fonce);
  text-transform: none;
  transition: color 0.125s ease-out;
}

a.ml-text a:hover,
a.sub-ml-text a:hover {
  color: var(--fushia-fonce);
  cursor: pointer;
}

.text-separator {
  border: 1px solid var(--anis-mid);
}

.leaflet-popup,
.leaflet-popup-content,
.leaflet-popup-content > *,
.leaflet-popup-content > * > * {
  max-width: max-content;
  font-size: 0.75rem;
  line-height: 1.4;
  padding: 0;
  margin: 0;
}

a.hidden-link {
  width: 100% !important;
  max-width: 100% !important;
  color: var(--color-darkgreen) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-align: right !important;
  margin-block: 5rem 0 !important;
  margin-inline: auto !important;
  cursor: default !important;
  font-size: 0.85rem !important;
}


a.inline-button-link,
a.inline-button-link:visited {
  width: max-content;
  text-decoration: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align:center;
  gap: 0.25rem;
  background-color: var(--fushia-impact);
  font-family: var(--font-main-menu-links);
  font-weight: 500;
  color: var(--color-white);
  text-shadow: 0 1px 1px var(--color-black);
  letter-spacing: 0.075rem;
  font-size: 0.9rem;
  padding: 1rem 0.75rem;
  border-radius: 3px;
  transition: background-color 0.125s ease-out;
}

a.inline-button-link:hover {
  background-color: var(--fushia-etiquette);
}

a.table-link,
a.table-link:visited {
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-family: var(--font-chat);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
  text-decoration: none;
  background: var(--color-cheddar);
  color: var(--color-white);
  border: none;
  margin-inline: auto;
  padding: 0.25rem 0.75rem;
  border-bottom: 3px solid var(--color-darkorange);
  border-radius: 25px;
  aspect-ratio: 4/1;
  cursor: pointer;
  transition: color 0.125s ease-out, background-color 0.125s ease-out,
    border-bottom 0.125s ease-out;
  box-shadow: 0 -1px 0 0 var(--color-grayblue-shadow);
}
a.table-link:hover {
  border-bottom: 3px solid transparent;
  background: var(--color-darkorange);
  color: var(--color-white-9);
}

hr.separator{
  width:70%;
  height:1px;
  border:none;
  box-shadow:0 1px .25px 0 var(--color-final-lightblack);
  display:block;
  margin-inline:auto;
  margin-block:2rem;
}

@media all and (max-width: 1100px) {
  .img-list {
    flex-wrap: wrap;
  }
  .img-list-items {
    width: 150px;
  }
  .images-list {
    width: 100%;
    min-width: auto;
    max-width: 100%;
    height: auto;
    min-height: 150px;
    max-height: 150px;
  }
  .img-list-container::-webkit-scrollbar {
    width: 5px;
    height: 18px;
    background-color: var(--anis-clair);
    border-radius: 50px;
  }
  .img-list-container::-webkit-scrollbar-thumb {
    background: var(--fushia-impact);
    border-radius: 50px;
  }
  .ml-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .ml-copyright {
    text-align: left;
    padding: 0.75rem;
    text-align: center;
  }
  .ml-link,
  .home-link {
    text-align: right;
    padding: 0.5rem;
    text-align: center;
  }
  a.ml-link {
    text-align: center;
  }
  a.ml-copyright {
    text-align: center;
  }
  a.home-link {
    text-align: center;
  }
}

@media all and (max-width: 899px) {
  table > tbody > tr:not(:first-child) {
    grid-template-columns: 1fr;
  }

  table > tbody > tr > th:not(:last-child),
  table > tbody > tr > td:not(:last-child) {
    box-shadow: 0 1px 0 0 var(--color-grayblue-shadow);
  }

  .table-form-td {
    box-shadow: none;
  }

  table > tbody > tr > td > img {
    width: 250px;
    border-radius: 3px;
  }

  a.table-link {
    box-shadow: none;
  }
}

@media all and (max-width: 850px) {
  .img-list {
    flex-wrap: wrap;
  }
  .img-list-items {
    width: 120px;
  }
  .images-list {
    width: 100%;
    min-width: auto;
    height: auto;
    min-height: 120px;
    max-height: 120px;
  }
  .img-list-container::-webkit-scrollbar {
    width: 5px;
    height: 18px;
    background-color: var(--anis-clair);
    border-radius: 50px;
  }
  .img-list-container::-webkit-scrollbar-thumb {
    background: var(--fushia-impact);
    border-radius: 50px;
  }
  .ml-line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .ml-copyright {
    text-align: center;
    padding: 0.75rem;
    text-align: center;
  }
  .ml-link,
  .home-link {
    text-align: center;
    padding: 0.5rem;
    text-align: center;
  }
  a.ml-link {
    text-align: center;
  }
  a.ml-copyright {
    text-align: center;
  }
  a.home-link {
    text-align: center;
  }
}

@media all and (max-width: 650px) {
  .main-menu {
    gap: 0.5rem;
    justify-content: flex-end;
    background-color: hsl(var(--ruban-fushia-shadow), 0.2);
    mix-blend-mode: multiply;
  }

  .main-menu-links {
    font-weight: 300;
    font-size: 0.85rem;
    padding: 0.25rem 0.35rem;
    letter-spacing: 0.025rem;
    text-transform: uppercase;
    text-shadow: unset;
    box-shadow: 0 3px 6px -3px hsl(var(--ruban-fushia-shadow), 0.9);
  }

  .main-menu-links::before,
  .main-menu-links::after {
    display: none;
    content: "";
    width: 0;
    height: 0;
    background-image: unset;
    background-size: unset;
    background-position: unset;
    background-repeat: unset;
  }
  a.ml-link {
    text-align: center;
  }
  a.ml-copyright {
    text-align: center;
  }
  a.home-link {
    text-align: center;
  }
}