/*
.......##..............########..#######..##....##.########..######.....................##
......##...##...##.....##.......##.....##.###...##....##....##....##.....##...##.......##.
.....##.....##.##......##.......##.....##.####..##....##....##............##.##.......##..
....##....#########....######...##.....##.##.##.##....##.....######.....#########....##...
...##.......##.##......##.......##.....##.##..####....##..........##......##.##.....##....
..##.......##...##.....##.......##.....##.##...###....##....##....##.....##...##...##.....
.##....................##........#######..##....##....##.....######...............##......
*/
@font-face {
  font-family: "Ma_Fonte";

  src: url("/fonts/Quicksand_Light.otf");
}
@font-face {
  font-family: "Ma_Fonte_Bold";
  src: url("/fonts/Quicksand_Bold.otf");
}
@font-face {
  font-family: "Ma_Fonte_2";
  src: url("/fonts/Le_Jour_Serif_Personal_Use_Only.otf");
}
@font-face {
  font-family: "Ma_Fonte_3";
  src: url("/fonts/Le_Jour_Script_Personal_Use_Only.otf");
}

.light {
  font-family: "Ma_Fonte";
}
.bold {
  font-family: "Ma_Fonte_Bold";
}
.serifCustom {
  font-family: "Ma_Fonte_2";
}
.scriptCustom {
  font-family: "Ma_fonte_3";
}

.font-gold {
  color: #a07036;
}
.font-cherry {
  color: #c4445e;
}
.font-dark-pink {
  color: #ebc8cf;
}
.font-16 {
  font-size: 16px;
}
.font-beige {
  color: #fffcf7;
}
.font-grey {
  color: #e3dbdb;
}
.font-brown {
  color: #e7ddd4;
}

body {
  font-family: "Ma_Fonte", sans-serif;
  font-weight: 300;
  background-color: #fffcf7;
}

/*
.......##..............########...######......................##
......##...##...##.....##.....##.##....##......##...##.......##.
.....##.....##.##......##.....##.##.............##.##.......##..
....##....#########....########..##...####....#########....##...
...##.......##.##......##.....##.##....##.......##.##.....##....
..##.......##...##.....##.....##.##....##......##...##...##.....
.##....................########...######................##......
*/
.bg-gold {
  background-color: #a07036;
}
.bg-cherry {
  background-color: #c4445e;
}
.bg-dark-pink {
  background-color: #ebc8cf;
}
.bg-beige {
  background-color: #fffcf7;
}
.bg-brown {
  background-color: rgb(231, 221, 212);
}
.bg-brown-transparent {
  background-color: rgba(231, 221, 212, 0.8);
}
.bg-grey {
  background-color: #e3dbdb;
}
.bg-kaki {
  background-color: #284625;
}

/* Cacher le scrollbar */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/*
.......##..............########....###....########..####.########..######.....................##
......##...##...##........##......##.##...##.....##..##..##.......##....##.....##...##.......##.
.....##.....##.##.........##.....##...##..##.....##..##..##.......##............##.##.......##..
....##....#########.......##....##.....##.########...##..######....######.....#########....##...
...##.......##.##.........##....#########.##...##....##..##.............##......##.##.....##....
..##.......##...##........##....##.....##.##....##...##..##.......##....##.....##...##...##.....
.##.......................##....##.....##.##.....##.####.##........######...............##......
*/
table {
  margin-top: 1rem;
  margin: auto;
}

td,
th {
  padding: 0.5rem;
  border: 1px solid #e7ddd4;
}

th {
  background-color: #e7ddd4;
  font-weight: bold;
}

td {
  border-color: #e7ddd4;
  background-color: #fffcf7;
  text-align: center;
}

.table-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scroll-hint {
  display: none;
  text-align: center;
  margin-bottom: 10px;
  padding: 8px;
  background: #e7ddd4;
  color: #a07036;
  font-size: 0.85rem;
}

/* Responsive */
@media screen and (max-width: 992px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .scroll-hint {
    display: block;
  }

  table {
    font-size: 0.95rem;
    overflow: scroll;
  }

  td:first-child,
  th:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  }
  th:first-child {
    z-index: 15;
  }
}
/*
.......##..............##.....##.########.##....##.########.####..#######..##....##..######......######...######...##.....##....................##
......##...##...##.....###...###.##.......###...##....##.....##..##.....##.###...##.##....##....##....##.##....##..##.....##.....##...##.......##.
.....##.....##.##......####.####.##.......####..##....##.....##..##.....##.####..##.##..........##.......##........##.....##......##.##.......##..
....##....#########....##.###.##.######...##.##.##....##.....##..##.....##.##.##.##..######.....##.......##...####.##.....##....#########....##...
...##.......##.##......##.....##.##.......##..####....##.....##..##.....##.##..####.......##....##.......##....##...##...##.......##.##.....##....
..##.......##...##.....##.....##.##.......##...###....##.....##..##.....##.##...###.##....##....##....##.##....##....##.##.......##...##...##.....
.##....................##.....##.########.##....##....##....####..#######..##....##..######......######...######......###.................##......
*/

.mentions {
  line-height: 1.6;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
}

.mentions h1 {
  color: #2c3e50;
  padding-bottom: 10px;
  font-size: 3rem;
}

.section h2 {
  color: #34495e;
  margin-top: 30px;
  font-weight: bold;
}
.section h3 {
  color: #546e7a;
  margin-top: 20px;
  font-weight: bold;
}
.section ul {
  margin: 10px 0;
}
.section li {
  margin: 5px 0;
}

/* API Adresse */

.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 2px solid #a07036;
  border-radius: 8px;
  margin-top: 5px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: none;
}

.suggestions.active {
  display: block;
}

.suggestion-item {
  padding: 12px 15px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #e7ddd4;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: #f5f0eb;
}

.suggestion-item.selected {
  background: #a07036;
  color: white;
}

.suggestion-name {
  font-weight: 600;
  color: #333;
}

.suggestion-item.selected .suggestion-name {
  color: white;
}

.suggestion-details {
  font-size: 13px;
  color: #666;
  margin-top: 2px;
}

.suggestion-item.selected .suggestion-details {
  color: rgba(255, 255, 255, 0.9);
}

.loading {
  text-align: center;
  padding: 15px;
  color: #666;
  font-size: 14px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #a07036;
  box-shadow: 0 0 3px #a07036;
}

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
}

input[type="date"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

input[type="checkbox"]:checked {
  background-image: none;
}