:root {
  /* ui color */
  --blue-light: #0254a2;
  --blue: #01396f;
  --blue-dark: #002c55;
  --white: #ffffff;
  --grey-light: #f1f5fa;
  --grey: #d9dfe8;
  --grey-dark: #7f97af;
  --yellow: #f4cc42;
  --yellow-dark: #d9b600;
  --yellow-darker: #ad8600;
  --bronze: #b99750;
  /* warning color */ 
  --orange:#ffc1a0;
  --orange-dark:#ff6e20;
  --red-light: #ffe0ec;
  --red:#fec3da;
  --red-dark: #ff569d;
  --green-light:#e0fff7;
  --green:#b6edde;
  --green-dark:#6ddcca;
  /* reservation badge color */ 
  --reserved: #33d4e8;
  --financed: #6ddc76;
  --acted: #f34f7d;
  /* resservation line color */ 
  --cancel-rgb: #cfd7e2;
  --option-rgb: #fae7a3;
  --reserved-rgb: #b1eef6;
  --financed-rgb: #c1f0c5;
  --acted-rgb: #fcd4df;
  /* image url */
  --login-image-url: transparent url(https://partenaires.groupeoceanic.fr/upload/go.png) 50% 30% no-repeat;
}

* {
  box-sizing: border-box;
}

html,body {
  font-family: Work Sans,Helvetica,Arial,sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.2em;
  overflow-x: hidden;
  z-index: 101;
  margin:0;
  padding: 0;
  background: var(--blue);
  color:var(--blue-dark);
}

/* small style */
body.compact .interface .table {
  font-size: .9em;
}
body.compact .interface .table .card {
  box-shadow: 0 .2em .6em 0 var(--grey);
  margin-top: .6em;
  padding: .2em 0;
}
body.compact .interface .table span {
  padding: .1em 0;
}

a {color:var(--blue-dark);}

a:active {color:var(--blue-dark);}a:focus{color:var(--blue-dark);}

a:hover {color:var(--blue);transition:all 100ms cubic-bezier(.8,.1,.15,.86);}

ul {margin: 0;padding: 0;list-style: none;}
li {display: inline-block;}
i,em {font-style: initial;display: inline-block;}
form {margin-block-end: 0;}
q {display: block;margin-bottom: 1em;}
q::before {content: '';}
q::after {content: '';}

h1,h2,h3,h4,hr {
  color: var(--blue);
  transition: none !important;
  letter-spacing: 0.1em;
  margin: 1em 0;
  font-weight: 700;
}

hr {
  border: 0;
  border-bottom: 1px var(--grey) solid;
  margin: 2em 0;
}

img {
  max-width: 100%;
  height: auto;
}

main {
  background-color: var(--blue);
  z-index: 101;
  width: 100%;
  height:auto;
  min-height:100vh;
  display: grid;
  grid-template-columns: 220px auto;
  grid-gap: 0;
  overflow: hidden;
}

main.login {
  grid-template-columns: 50% 50%;
}

main.menulock {
  grid-template-columns: 70px auto;
}

.menu,.message{
  background: linear-gradient(to right,var(--blue-dark), var(--blue));
  color: var(--white);
  display: flex;
  flex-flow: column;
  z-index: 102;
}
.interface {
  background-color: var(--grey-light);
  border-radius: 2em;
  margin:1em 1em 1em 0;
  padding: 2em;
  position: relative;
}
.messages {
  background-color: var(--white);
  border: 1px solid var(--grey);
  color: var(--grey-dark);
  font-size: .8em;
  border-radius: 2em;
  position: fixed;
  padding: 1em;
  z-index: 103;
  top: 2em;
  left: 2em;
  transition: opacity .5s ease;
}
.messages.errors {
  opacity: 1;
  background: var(--red-light);
  border: 1px solid var(--red-dark);
  color: var(--red-dark);
}
.messages.success {
  opacity: 1;
  background: var(--green-light);
  border: 1px solid var(--green-dark);
  color: var(--green-dark);
}
.messages.loading {
  opacity: 1;
}
.messages.loading span {
  display: inline-block;
  font-weight: bold;
  animation: rotateToInfinity 500ms linear infinite;
}
@keyframes rotateToInfinity {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.messages.standby {
  opacity: 0;
  transition: all 0s ease;
}

/* tooltip class */
.tooltip {
  position: relative;
}
.tooltip:hover::after {
  content: attr(data-tip);
  border-radius: .8em;
  background-color: var(--blue-dark);
  color: var(--white);
  font-size: .8em;
  text-align: center;
  position: absolute;
  margin-left: 1em;
  width: 100px;
  z-index: 106;
}

/* generic grid class */
.grid {
  margin-bottom: 2em;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 2em;
  transition: all 1s cubic-bezier(0.78, 0.13, 0.15, 0.86);
}
.content{
  margin-bottom: 2em;
  grid-column: span 12;
  transition: all 1s cubic-bezier(.8,.1,.15,.85);
}
.bold {
  font-weight: 600;
}
.small {
  color: var(--grey-dark);
  font-weight: 600;
  font-size: .9em;
}
.verysmall {
  font-size: .7em;
}
.del {
  text-decoration: line-through;
}
.right {
  text-align: right;
}
.download u{
  cursor: pointer;
}
ul.column {
  list-style: contents;
}
ul.column li {
  display: block;
}
/* input generic class */
input, select, button, textarea {
  padding:.5em;
  border-radius: .8em;
  box-sizing: border-box;
  color:var(--grey-dark);
  border: 1px solid var(--grey);
  box-shadow: 0 .4em 1em 0 var(--grey);
  background-color: var(--white);
  appearance: none;
  outline: none;
}
input::placeholder {
  color: var(--grey-dark);
}
input:disabled {
  background-color: var(--grey-light);
}
input[type=checkbox] {
  appearance: auto;
}
input[type=checkbox].toggle  {
  top: 4px;
  margin: 0 .5em;
  box-shadow: 0 .2em 1em 0 var(--grey);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
input[type=checkbox].toggle:focus {
  outline: 0;
}
input[type=file] {
  font-size: .7em;
  white-space: nowrap;
}
.btn {
  background: var(--blue);
  color: var(--white);
  border-radius: .8em;
}
.toggle {  
  margin: 0 1em;
  height: 18px;
  width: 32px;
  border-radius: 16px;
  display: inline-block;
  position: relative;
  margin: 0;
  background: var(--grey-light);
  transition: all .2s ease;
}
.toggle:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--grey);
  transition: all .2s cubic-bezier(.5,.1,.75,1.35);
}
.toggle:checked {
  border: 1px solid var(--blue);
  background: var(--blue);
}
.toggle:checked:after {
  background: var(--white);
  transform: translatex(14px);
}
.interface .card label small {
  display: inline;
}
textarea{
  width: 100%;
}
button {
  cursor: pointer;
  background: var(--blue);
  color: var(--white);
  padding:.5em 1em;
}
button:hover{
  color: var(--yellow);
}
button:disabled, button[disabled]{
  background-color: var(--grey);
  color: var(--grey-dark);
}
.btn.yellow {
  background-color: var(--yellow);
  color: var(--blue);
}
.btn.yellow:hover{
  background-color: var(--yellow-dark);
  color: var(--blue-dark);
}

/* scroll class */
.scroll {
  scroll-behavior: smooth;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 150px;
}
.scroll::-webkit-scrollbar {
  width: 0.4em;
}
.scroll::-webkit-scrollbar-thumb {
  background: var(--blue-dark);
  border-radius:.4em;
}
.scroll::-webkit-scrollbar-track {
  background: var(--grey);
  border-radius: .4em;
}
.shortlist {
  padding:0 1em;
  background: var(--grey-light);
}
.shortlist-250 {
  height: 250px;
}

/* reservation colors */
.badge, .info, .round {
  border-radius :.8em;
  font-weight: 600;
  margin: 0 1em;
  padding: .4em 1em;
}
.badge.callmeback {
  cursor: pointer;
  text-decoration: underline;
}
.badge.callmeback:hover {
  background: var(--blue-light);
  color: var(--white);
}
sup.badge {
  padding: 0 .4em;
  margin: initial;
}
.round {
  padding: 0 .3em;
}
.info {
  margin: auto 0;
  padding: 1em;
}
.orange {
  background-color: var(--orange);
  color: var(--orange-dark) !important;
}
.green {
  background-color: var(--green);
  color: var(--green-dark) !important;
}
.red {
  background-color: var(--red);
  color: var(--red-dark) !important;
}
.blue {
  background-color: var(--blue-light);
  color: var(--white);
}
.textred {
  color: var(--red-dark) !important;
}
.expired {
  color: var(--red-dark) !important;
}
.st0 {
  background-color: var(--grey);
  color: var(--grey-dark);
}
.st1, .st1 a  {
  background-color: var(--yellow);
  color: var(--yellow-darker);
}
.st2, .st2 a  {
  background-color: var(--reserved);
  color: var(--white);
}
.st3, .st3 a {
  background-color: var(--financed);
  color: var(--white);
}
.st4, .st4 a {
  background-color: var(--acted);
  color: var(--white);
}
.rq0 {
  background-color: var(--orange);
  color: var(--orange-dark);
}
.rq1 {
  background-color: var(--green);
  color: var(--green-dark);
}
.rq2 {
  background-color: var(--red);
  color: var(--red-dark);
}
.pr0 {
  background-color: var(--grey);
  color: var(--grey-dark);
}
.pr1 {
  background-color: var(--yellow);
  color: var(--blue-dark);   
}
.pr2 {
  background-color: var(--blue-dark);
  color: var(--white); 
}
.interface .card.cl0 {
  background-color: var(--cancel-rgb);
}
.interface .card.cl1 {
  background-color: var(--option-rgb);
}
.interface .card.cl2 {
  background-color: var(--reserved-rgb)
}
.interface .card.cl3 {
  background-color: var(--financed-rgb);
}
.interface .card.cl4 {
  background-color: var(--acted-rgb);
}


/* position absolute class */
.corner {
  display: inline-block;
  position: absolute;
  top: 2em;
}
.corner.right {
  right: 2em;
}

/* action icon colors */
.icon-edit, .icon-delete, .icon-see, .icon-reserv,.icon-alert-g,.icon-dupli {
  border-radius: 1em;
  text-decoration: none;
  cursor: pointer;
  padding:0 3px;
}
.icon-edit {
  background-color: var(--grey);
  color: var(--grey-dark);
}
.icon-delete {
  background-color: var(--red);
  color: var(--white);
}
.icon-see {
  background-color: var(--blue);
  color: var(--white);
}
.icon-dupli {
  background-color: var(--grey-light);
  color: var(--blue-light);
}
.icon-reserv {
  background-color: var(--yellow);
  color: var(--blue);
}
.icon-alert-g {
  background-color: var(--grey);
  color: var(--grey-dark);
}
.icon-loading {
  font-weight: bold;
  animation: rotating .5s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* menu class */
.menu {
  height: 100%;
}
.menu nav {
  height: 100vh;
  display: flex;
  flex-flow: column;
}
.menu img {
  margin: 2em auto;
  max-width: 250px;
  width: 60%;
  cursor: pointer;
}
.menu .burger {
  padding:0 1em 1em 1em;
  font-size: 1.4em;
  text-align: right;
  cursor: pointer;
  display: none;
}.menu.drop ul {
  display: block;
  animation: fadeInDown .2s ease-in-out normal;
}
@keyframes fadeInDown {
  from {opacity: 0;}
  to {opacity: 1;}
}
.menu ul.logout {
  margin-top: auto;
}
.menu ul.logout li {
  background: var(--blue-dark);
  color: var(--orange);
  line-height: 40px;
  height: 40px;
}
.menu ul.scrolltop {
  position: fixed;
  margin-top: auto;
  bottom: 0;
  display: none;
  opacity: 0;
  width: 220px;
}
.menulock .menu ul.scrolltop {
  width: 70px;
}
.menu ul.scrolltop.visible {
  display: block;
  animation: dropIn 750ms .50ms ease forwards;
}
.menu ul.scrolltop li {
  background: transparent;
}
.menu ul.scrolltop li:hover {
  color: var(--blue-light);
}
.menu li {
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  display: block;
  overflow: hidden;
  padding: 0 0 0 2em;
  line-height: 60px;
  height: 60px;
  cursor: pointer;
}
.menu li i {
  margin-right: 1em;
  transition: all 150ms ease;
}
.menu li:hover i {
  margin-right: 1.4em;
}
.menulock .menu li:hover i {
  transform: scale(1.4);
}
.menu li.li-dark{
  background: var(--blue-dark);
  color: var(--yellow-dark);
}
.menu li:hover ,.menu ul.logout li:hover{
  background: var(--grey-light);
  color: var(--blue-dark);
}
.menu li.active{
  background: var(--yellow);
  color: var(--blue-dark);
}
.menu li.active:hover{
  background: var(--yellow);
  color: var(--blue-dark);
}
.menu code {
  display: block;
  color: var(--grey);
  padding:1em 0;
  text-align: center;
}

.menu .lock {
  cursor: pointer;
}

/* login message class */
.message {
  text-align: center;
  font-weight: lighter;
}
.message img {
  margin: 2em auto;
}
.message h1{
  color: var(--white);
  font-weight: lighter;
}
.message h2{
  color: var(--yellow);
  font-weight: 400;
  letter-spacing: normal;
  font-size: 2em;
}
.message section {
  background: var(--login-image-url);
  background-size: 100%;
  letter-spacing: 0.05em;
  padding:3em 0;
  height: 100%;
}
.message .consent{
  background: var(--blue-dark);
  padding:1em;
  border-radius: 1em;
  box-shadow: 0 .1em .4em 0 var(--grey-dark);
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 104;
  width: 80%;
  max-width: 600px;
  height: auto;
}
.message code {
  font-size: .8em;
  color: var(--blue-light);
}
.message u {
  cursor: pointer;
}
.message .privacy {
  background: var(--blue-dark);
  padding:1em;
  border-radius: 1em;
  box-shadow: 0 .1em .4em 0 var(--grey-dark);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 103;
  width: 80%;
  max-width: 600px;
  height: auto;
}
.message .privacy .content {
  font-size: .6em;
  height: 100%;
  max-height: 400px;
}
.message .privacy .content h3{
  color: var(--blue-light);
}
.message .privacy .content::-webkit-scrollbar-thumb {
  background: var(--yellow);
  border-radius:.4em;
}
.message .privacy .content::-webkit-scrollbar-track {
  background: var(--blue);
  border-radius: .4em;
}
/* interface class */
.interface .title {
  margin:1em 0;
}
.interface .title h1 {
  margin: 0 0 1em 0;
  font-size: 1.5em;
  line-height: normal;
}
.interface .title i {
  color: var(--grey-dark);
  margin-right: 0.5em;
}
.interface .tabs {
  margin:0;
  display: inline-block;
  font-size: .6em;
  cursor: pointer;
}
.interface .tabs h1 {
  display: inline-block;
  border-radius: 1em;
  font-weight: 600;
  color: var(--grey-dark);
  padding:.8em 1.2em;
  margin: 0 1em 1em 0;
}
.interface .tabs h1 {
  border: 1px var(--grey) solid;
  background: var(--white);
  color: var(--grey);
}
.interface .tabs h1 i{
  color: var(--grey);
  margin-right: 0.5em;
}
.interface .tabs h1.active {
  background: var(--blue-dark);
  color: var(--white);
}
.interface .tabs h1.active i { 
  color: var(--yellow);
}
.interface .icotext i {
  background: var(--blue);
  color: var(--yellow);
  margin-right: .4em;
}
.interface .icotext {
  background: var(--blue);
  color: var(--white);
  border-radius: .8em;
  padding:.2em .6em;
  cursor: pointer;
}

/* card */
.interface .card, .interface .list {
  background-color: var(--white);
  box-shadow: 0 0.4em 1.4em 0 var(--grey);
  position: relative;
  border-radius: 2em;
  grid-column: span 12;
  padding: 2em;
}

/* Filter */
.interface .filter {  
  margin-bottom: 1em;
  width: 100%;
}
.interface .small .filter {
  font-size: .8em;
}
.interface .filter ul {
  display: inline-block;
  font-size: .8em;
}
.interface .filter li {
  margin-bottom: 1em;
  margin-right: 1em;
  border-radius: 2em;
  cursor: pointer;
}
.interface .filter select, .interface .filter input {
  border-radius: 2em;
  padding:.8em 1em;
  font-size: .9em;
  border: none;
}
.interface .filter select {
  max-width: 200px;
  background-color: var(--blue-dark);
  color: var(--white);
  padding-right: 4em;
}
.interface .filter li.filterchoice.active select {
  background-color: var(--yellow);
  color: var(--blue);
}
.interface .filter li.filterchoice, .interface .filter li.filtersearch {
  margin-right: 0;
  cursor: auto;
}
.interface .filter li.filterchoice i, .interface .filter li.filtersearch i {
  position: relative;
  color: var(--white);
  left: -1.8em;
}
.interface .filter li.filterchoice.active i{
  color: var(--blue);
}
.interface .filter li.filtersearch i {
  color: var(--grey-dark);
}
.interface .card .filter li.filtersearch {
  margin-bottom: 0;
  font-size: .8em;
  color: var(--grey-dark);
}
.interface .filter li.filterlist {
  background-color: var(--grey);
  color: var(--grey-dark);
  padding:.4em .8em;
}
.interface .filter li.filterlist.active {
  background-color: var(--yellow);
  color: var(--blue-dark);
  padding:.4em .8em;
}
.interface .filter li.filteradd {
  background-color: var(--blue);
  color: var(--white);
  padding:.4em 1em;
}
.interface .filter li.filteradd i {
  color: var(--yellow);
}
.interface .filter li.filteradd:hover {
  background-color: var(--blue-dark);
  color: var(--yellow);
}
.interface .filter li.filteradd:hover i {
  color: var(--white);
}
.interface .loadmore {
  text-align: center;
}
/* */

/* New & Edit */
.interface .new label {
  display: block;
  margin-bottom: 1em;
}
.interface .new select {
  background-color: var(--blue-dark);
  max-width: 200px;
  color: var(--white);
  padding-right: 4em;
}
.interface select.big {
  font-size: 1.2em;
  max-width: 400px;
}
.interface .new p i {
  position: relative;
  color: var(--white);
  left: -1.4em;
  top: .2em;
}
.interface .new figure {
  background: var(--blue);
  border-radius: 1em;
  overflow: hidden;
  max-width: 400px;
}
.interface .new h2 {
  font-weight: 400;
  letter-spacing: 3px;
}

/* Status colors */
.statusColors {
 font-size: .8em;
 color: var(--grey-dark);
 margin-top: -1em;
 margin-bottom: 1em;
}
.statusColors li {
  margin: 1em;
}

/* export list */
.exportList {
  font-size: .8em;
  color: var(--grey-dark);
  margin-top: -1em;
  margin-bottom: 1em;
}
.exportList li {
  margin: 1em 0;
  display: block;
}
.exportList li label {
  background-color: var(--grey-light);
  color: var(--grey-dark);
  padding:.2em .8em;
  border-radius: .8em;
  margin: .4em;
  display: inline-block;
  accent-color: var(--blue-light);
  cursor: pointer;
}
.exportList li label:hover {
  background-color: var(--grey);
}
.exportList li label.blue {
  background-color: var(--grey);

}
.exportList li label.blue:hover {
  background-color: var(--grey-light);
}

/* table labels ul li*/
.interface .table li {
  width: 100%;
  color: var(--blue);
  text-align: center;
  font-size: .8em;
}
.interface .table li.td:hover {
  box-shadow: 0 0 .2em 0 var(--grey-dark);
}
.interface .table label {
  border:2px solid var(--grey);
  border-left: none;
  background-color: var(--white);
  color: var(--grey-dark);
  font-weight: 600;
  display: inline-block;
  padding:.4em 1em;
}
.interface .table label.sort {
  color: var(--blue);
  cursor: pointer;
}
.interface .table label.sort.reset {
  color: var(--yellow);
}
.interface .table label.sort.active{
  background-color: var(--grey-light);
}
.interface .table label.sort.active:before{
  content: '⏵';
  display: block;
  position: absolute;
  transform: rotate(90deg);
}
.interface .table label.sort.active.dir:before{
  transform: rotate(-90deg);
}
.interface .table label:first-of-type {
  border-radius: 1em 0 0 1em;
  border-left:2px solid var(--grey);
}
.interface .table label:last-of-type {
  border-radius:0 1em 1em 0;
  border-left: none;
}
.interface .table span {
  padding:.4em 0;
  display: inline-block;
}
.interface .table .card {
  margin-top: 1em;
  border-radius: 1em;
  padding: 1em 0;
}
.interface .table ul li{
  display: grid;
  overflow: hidden;
}
.interface .nodata {
  text-align: center;
  padding: 2em;
}

/* profile */ 
.interface .profile {
  background: var(--grey-light);
  position: absolute;
  top: 1em;
  right: 1em;
}
.interface .profile li {
  padding: .6em;
  font-size: 1.6em;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  overflow: hidden;
}
.interface .profile .bulle {
  background: var(--blue-dark);
  color: var(--white);
  border-radius: 2em;
  font-size: .8em;
  z-index: 102;
  margin-right: 1em;
  padding:.4em .8em;
  position: relative;
  top: -10px;
}
.interface .profile .bulle span {
  border-radius: 1em;
  background: var(--yellow);
  color: var(--blue);
  padding:.1em .4em;
}
.interface .profile .alert {
  background: var(--blue-dark);
  color: var(--white);
  margin-right: .4em;
  position: relative;
}
.interface .profile .alert:hover {
  color: var(--yellow);
}
.interface .profile .alert svg {
  position: absolute;
  top: 15px;
  left: 32px;
}
.interface .profile .alert.active svg circle{
  fill: var(--yellow);
}
.interface .profile .alert:hover.active svg circle{
  fill: var(--white);
}
.interface .profile .account {
  background: var(--yellow);
  color: var(--blue-dark);
}
.interface .profile .account:hover {
  color: var(--white);
}

/* dashboard */
.interface .welcome {
  position: relative;
  height: auto;
}
.interface .welcome em {
  padding: 0.5em 1em;
  background-color: var(--blue-dark);
  font-size: 1.4em;
  border-radius: 2em;
  color: var(--white);
}
.interface .welcome i {
  color: var(--yellow);
}
.interface .welcome time {
  padding: 0.5em 1em;
  background-color: var(--blue);
  border-radius: 2em;
  color: var(--white);
  margin-top: 1em;
  margin-left: 1em;
  display: inline-block;
}
.interface .card small {
  color: var(--grey-dark);
  display: block;
  font-weight: 600;
  margin-bottom: 1em;
}
.interface .card .normal {
  color: var(--blue-dark);
}
.interface .dashboard .total p {
  text-align: right;
  margin-bottom: 0;
}
.interface .dashboard .total em {
  float: left;
  font-weight: 600;
  font-size: 2em;
  color: var(--blue);
}
.interface .dashboard .total span {
  padding: .5em;
  border-radius: 1em;
  font-size: 1.4em;
  display: inline-block;
}
.interface .dashboard .total  span.blue {
  background-color: var(--blue);
  color: var(--yellow);
}
.interface .dashboard .total  span.grey {
  background-color: var(--grey);
  color: var(--blue);
}
.interface .dashboard .total  span.yellow {
  background-color: var(--yellow);
  color: var(--blue);
}
.interface .table.lastconnected ul li {
  grid-template-columns: 2fr 3fr;
}
.interface .table.alert ul li {
  grid-template-columns: repeat(2, 1fr);
}
.interface .table.by3 ul li {
  grid-template-columns: repeat(3, 1fr);
}
.interface .table.by4 ul li {
  grid-template-columns: repeat(4, 1fr);
}
.interface .table.by5 ul li {
  grid-template-columns: repeat(5, 1fr);
}
.interface .table.by6 ul li {
  grid-template-columns: repeat(6, 1fr);
}
.interface .table.by8 ul li {
  grid-template-columns: repeat(4, 1fr);
}
.interface .table.by9 ul li {
  grid-template-columns: repeat(5, 1fr);
}
.interface .dashpart .interlocutor li {
  padding: 0 0 2em 2em ;
  display: inline-block;
}
.interface .dashpart .interlocutor li:hover img {
  border: 4px solid var(--yellow);
}
.interface .dashpart .interlocutor img {
  border: 4px solid var(--blue);
  border-radius: 50%;
  float: left;
  width: 80px;
  height: auto;  
}
.interface .dashpart .interlocutor section {
  padding-left: 1em;
  min-width: 150px;
  float: left;
}
.interface .dashpart .interlocutor span {
  display: block;
}
.interface .dashpart .msg {
  max-width: 1000px;
}

.interface .dashpart .download .list {
  margin-top: 1em;
  border-radius: 1em;
  padding: 1em;
}

/* Programs class (card)*/ 
.interface .programs .card {
  border-radius: 1em;
  padding: 0;
}
.interface .programs .card .city {
  background: var(--blue-dark);
  color: var(--white);
  text-align: right;
  padding: .5em 1em;
  border-radius:1em 1em 0 0;
}
.interface .programs .card .status {
  background: var(--yellow);
  border-radius: 1em;
  display: inline-block;
  position: absolute;
  z-index: 103;
  top: 1.5em;
  left: 1em;
  padding: .3em 1em;
  font-size: .7em;
}
.interface .programs .card .law {
  background: var(--white);
  border-radius: 1em;
  position: relative;
  z-index: 103;
  float: right;
  margin: -3.5em 1em 0 0;
  padding: .2em 1em;
  font-size: .6em;
}
.interface .programs .image {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  z-index: 102;
  cursor: pointer;
}
.interface .programs .image img {
  max-height: 200px;
  width: 100%;
  opacity: .8;
  filter: grayscale(.4);
  transition: all 100ms linear;
}
.interface .programs .image:hover img {
  opacity: 1;
  filter: grayscale(0);
}
.interface .programs .card .inside {
  position: relative;
  color: var(--blue);
  padding: 1em;
}
.interface .programs .inside .title {
  font-size: 1em;
  font-weight: bold;
}
.interface .programs .card .inside small {
  display: inline-block;
  position: absolute;
  top: 1em;
  right: 1em;
}
.interface .programs .inside .location {
  display: block;
  color: var(--grey-dark);
  font-size: .8em;
  font-weight: 600;
  margin-bottom: 1em;
}
.interface .programs .card .inside ul li {
  padding: .5em 0;
  background: var(--blue-dark);
  color: var(--white);
  text-align: center;
  width: 33.32%;
  font-size: .8em;
}
.interface .programs .card .inside ul li span {
  display: block;
  font-weight: 600;
}
.interface .programs .card .inside ul li:first-child {
  background: var(--blue);
  border-radius:1em 0 0 1em;
}
.interface .programs .card .inside ul li:last-child {
  background: var(--yellow);
  color: var(--blue);
  border-radius:0 1em 1em 0;
}
.interface .programs .inside p {
  text-align: justify;
}
.interface .programs .card .inside .progress {
  border-radius: 1em;
  overflow: hidden;
  width: 100%;
}
.interface .programs .card .inside .progress-bar {
  display: inline-block;
  text-align: center;
  font-size: .6em;
}
.interface .programs .card .inside .progress-bar:nth-of-type(1) {
  background: var(--grey);
}
.interface .programs .card .inside .progress-bar:nth-of-type(2) {
  background: var(--yellow);
}
.interface .programs .card .inside .progress-bar:nth-of-type(3) {
  background: var(--reserved);
}
.interface .programs .card .inside .progress-bar:nth-of-type(4) {
  background: var(--financed);
  color: var(--white);
}
.interface .programs .card .inside .progress-bar:nth-of-type(5) {
  background: var(--acted);
  color: var(--white);
}
.interface .programs .card .inside button {
  background: var(--blue-dark);
  border-radius: 1.5em;
  margin-top: 1em;
  font-size: .8em;
  width: 100%;
}
/* program card hightlight */
.interface .dashpart .programs .card .city {
  background: linear-gradient(to right,var(--blue-light),var(--blue-dark));
}

/* Programs class (list)*/ 
.interface .programs .list {
  border-radius: .8em;
  padding: 1em;
  font-size: .9em;
}
.interface .programs .list .container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1em;
}
.interface .programs .list section {
  grid-column: span 1;
  overflow: hidden;
}
.interface .programs .list .image {
  min-height: 100px;
  max-width: 200px;
  margin:0 auto;
  border-radius: 1em;
  overflow: hidden;
}
.interface .programs .list .image img {
  max-height: 100px;
}
.interface .programs .list .location {
  margin: 0;
}
.interface .programs .list p {
  margin: 0;
}
.interface .programs .list .infos span {
  padding: .6em 1em;
  white-space: nowrap;
  text-align: center;
  display: block;
  font-size: .8em;
}
.interface .programs .list .infos .city {
  background: var(--blue-dark);
  color: var(--white);
  border-radius: 1em 1em 0 0;
}
.interface .programs .list .infos .law {
  background: var(--blue);
  color: var(--white);
}
.interface .programs .list .infos .status {
  background: var(--grey);
  border-radius:0 0 1em 1em;
}
.interface .programs .list .detail ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  font-size: .8em;
}
.interface .programs .list .detail ul li{
  text-align: center;
  padding: .5em 1em;
  white-space: nowrap;
}
.interface .programs .list .detail ul li span {
  display: block;
  font-weight: 600;
}
.interface .programs .list .detail ul li:nth-of-type(1) {
  background: var(--blue);
  color: var(--white);
  border-radius: 1em 0 0 0;
}
.interface .programs .list .detail ul li:nth-of-type(2) {
  background: var(--blue-dark);
  color: var(--white);
  border-radius: 0 1em 0 0;
}
.interface .programs .list .detail ul li:nth-of-type(3) {
  background: var(--yellow);
  border-radius: 0 0 0 1em;
}
.interface .programs .list .detail ul li:nth-of-type(4) {
  background: var(--grey);
  border-radius: 0 0 1em 0;
}
.interface .programs .list .edit ul li {
  display: list-item;
  text-align: center;
  padding: .5em 0;
}

/* Programme Donut */ 
.interface .donut {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.donut svg {
  margin: 0 auto;
  fill: #fff;
  border-radius: 50%;
  cursor: pointer;
}
.donut circle {
  stroke-width: 6;
  transform-origin: 50% 50%;
  fill: transparent;
  transition: all .5s;
}
.donut g:hover circle {
  stroke-width:8;
}
.donut g:hover text {
  opacity: 1;
}
.donut text {
  font-size: .6em;
  font-weight: 600;
  transition: all .25s;
  transform-origin: 50% 50%;
  transform:translateY(0.3em);
  text-anchor: middle;
  opacity: 0;
}
.donut text.svgtotal {
  opacity: 1;
}
.donut svg:hover text.svgtotal {
  opacity: 0;
}
.interface .donuts ul {
  font-size: .8em;
}
.interface .donut ul li {
  color: var(--grey-dark);
  font-size: .8em;
  display: list-item;
  white-space: nowrap;
}

/* Programme détails*/
.interface .program {
  grid-gap: 1em;
}
.interface .program .card {
  border-radius: 1em;
}
.interface .program .gallery {
  grid-column: span 12;
  border-radius: 1em;
  position: relative;
  overflow: hidden;
}
.interface .program .gallery .city {
  background: var(--blue-dark);
  color: var(--white);
  text-align: right;
  max-width: 800px;
  padding: .5em 1em;
  border-radius:1em 1em 0 0;
}
.interface .program .gallery .status {
  background: var(--yellow);
  border-radius: 1em;
  display: inline-block;
  position: absolute;
  z-index: 103;
  top: 1.5em;
  left: 1em;
  padding: .3em 1em;
  font-size: .7em;
}
.interface .program .gallery .images {
  border-radius:0 0 1em 1em;
  overflow: hidden;
  min-height: 200px;
  max-height: 450px;
  max-width: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  z-index: 102;
  position: relative;
}
.interface .program .gallery .images img {
  width: 100%;
  min-height: 200px;
  display: none;
}
.interface .program .gallery .images img.active {
  display: block;
}
.interface .program .gallery .images ul {
  position: absolute;
  margin:0 auto;
  bottom: 1em;
}
.interface .program .gallery .images ul li {
  border: 2px solid var(--white);
  background: var(--blue-dark);
  cursor: pointer;
  font-size: 10px;
  line-height: 10px;
  text-indent: -9999px;
  white-space: nowrap; 
  padding:0 5px;
  margin: 0 .5em;
  border-radius: 50%;
}
.interface .program .gallery .images ul li.active {
  border: 2px solid var(--yellow);
}
.interface .program .infos{
  grid-column: span 12;
  position: relative;
}
.interface .program .infos .title {
  font-size: 1em;
  font-weight: bold;
}
.interface .program .card .infos small {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
}
.interface .program .infos p {
  text-align: justify;
}
.interface .program .infos .location {
  display: block;
  color: var(--grey-dark);
  font-size: .8em;
  font-weight: 600;
  margin-bottom: 1em;
}
.interface .program .infos .inside {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
}
.interface .program .infos .inside .badged {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
.interface .program .infos .inside .badged li p {
  background: var(--blue-dark);
  margin: 0;
  text-align: center;
  width: 100%;
  color: var(--white);
  display: inline-block;
  padding: .8em 0;
  white-space: nowrap;
  font-size: .8em;
  border-radius: 2em;
}
.interface .program .infos .inside .badged li p.blue {
  background: var(--blue);
}
.interface .program .infos .inside .badged li p.yellow {
  background: var(--yellow);
  color: var(--blue-dark);
}
.interface .program .infos .inside .badged li p.grey {
  background: var(--grey);
  color: var(--blue-dark);
}
.interface .program .infos .inside .badged li span {
  font-weight: 600;
  display: inline-block;
}
.interface .program .infos .inside .download {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1em;
}
.interface .program .infos .inside .download li {
  grid-column: span 2;
  padding: .5em 0;
  color: var(--grey-dark);
  text-align: center;
  font-size: .8em;
  line-height: normal;
}
.interface .program .infos .inside .download li i {
  display: inline-block;
  background: var(--grey);
  color: var(--grey-dark);
  border-radius: 40px;
  line-height: 40px;
  height: 40px;
  width: 40px;
}
.interface .program .infos .inside .download li span {
  display: block;
  margin-top: .4em;
  font-size: .8em;
}
.interface .program .infos .inside .stats {
  margin-top: 1em;
}
.interface .program .infos .inside .program-logo {
  text-align: center;
}
.interface .program .infos .inside .program-logo img {
  max-height: 64px;
  max-width: 128px;
  width: auto;
}

.interface .program .infos .certification {
  display: grid;
  text-align: center;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em;
  margin-top: 1em;
}
.interface .program .infos .certification img {
  max-width: 150px;
}
.interface .program .infos .certification span i {
  display: block;
  padding: .6em 0;
  font-size: .7em;
  color: var(--grey-dark);
}

/* mailing */
.interface span.listselect {
  text-align: center;
  display: block;
  height: 150px;
  width: 200px;
  border-radius: .4em;
  line-height: 3em;
  font-size: 3em;
  background-color: var(--blue);
  color: var(--yellow);
}
.interface span.listselect.none {
  background-color: var(--blue);
  color: var(--blue-dark);
}
.list-image {
  display: block;
  font-size: 8em;
}
table.mailing {
  background: var(--white);
  /* table-layout: fixed; */
  border-collapse: collapse;
  border-spacing: 0;
  width: inherit;
  width: 100%;
  max-width: 560px;
}
table.mailing td {
  white-space: nowrap;
  border: 1px solid var(--grey);
  padding: auto;
}

/* programs class */
.interface .progs.table ul li {
  grid-template-columns: repeat(4, 1fr);
}

/* lots class */
.interface .lots.table ul li {
  grid-template-columns: repeat(5, 1fr);
}
.interface .lots.table.limited ul li {
  grid-template-columns: repeat(3, 1fr);
}
.interface .lots.table.import input {
  width: 90%;
}
.interface .lots.table.import span {
  display: block;
}

/* reservations class */
.interface .reservations.table ul li {
  grid-template-columns: repeat(3, 1fr);
}
.interface .table ul li sup a {
  margin-left: 2px;
  font-size: 1.2em;
  text-decoration: none;
  line-height: .8em;
}
/* accountReservations */
.interface .accountReservations.table ul li {
  grid-template-columns: repeat(3, 1fr);
}
.interface .accountReservations.table ul li .badge{
  margin:0 1em;
}
/* dashReservation*/
.interface .dashReservations.table ul li {
  grid-template-columns: repeat(4, 1fr);
}
.interface .dashReservations.table ul li span{
  overflow: hidden;
}


.interface .card .finder {
  height: auto;
  max-height: 250px;
  margin-bottom: .6em;
}
.interface .card .finder li {
  cursor: pointer;
  border-radius: .8em;
  margin: .4em;
  background-color: var(--grey-light);
  font-size: .8em;
  padding: .2em .4em;
}
.interface .card .finder li:hover {
  background-color: var(--grey);
}
.interface .card .finder li.selected {
  background-color: var(--yellow);
  color: var(--blue-dark);
}
.interface .card .finder li.more {
  background-color: var(--white);
  color: var(--grey-dark);
}

/* requests class */
.interface .demandes.table ul li {
  grid-template-columns: repeat(4, 1fr);
}

/* syntheses class */
.interface .syntheses.table ul li {
  grid-template-columns: repeat(5, 1fr);
}
.interface .syntheses.table ul li .remarktext {
  display: inline-block;
  overflow-wrap: break-word;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  max-height: 2em;
}
.interface .syntheses.table ul li .remarktext:hover {
  transition: max-height 0.5s ease-in-out;
  max-height: 1000px;
}

/* users class */
.interface .users.table ul li {
  grid-template-columns: repeat(5, 1fr);
}
.interface .users.table ul li span {
  white-space: nowrap;
  overflow: hidden;
}

/* prospects class */
.interface .prospects.table ul li {
  grid-template-columns: repeat(4, 1fr);
}
.interface .prospects.table ul li span {
  white-space: nowrap;
  overflow: hidden;
}

/* login class */
.askfor {
  text-align: right;
}
.askfor li {
  padding: .6em;
  font-size: .8em;
  text-align: center;
  border-radius: 1em;
  color: var(--blue);
  background: var(--grey);
  margin-right: .4em;
  cursor: pointer;
}
.askfor li i {
  background: var(--blue);
  color: var(--yellow);
  padding:0 .2em;
  margin:0 .1em;
  border-radius: 2em;
}
.loginForm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  max-width: 250px;
  margin: auto;
  padding: 3em 0;
}
.interface .loginForm h1 {
  margin: 0;
}
.loginForm {
  opacity: 0;
  transform: translateY(-30px);
  animation: dropIn 750ms .50ms ease forwards;
}
.loginForm.drop {
  animation: dropIn2 750ms .50ms ease forwards;
}
@keyframes dropIn {
  0% {opacity: 0;transform: translateY(-30px);}
  to {opacity: 1;transform: translateY(0px);}
}
@keyframes dropIn2 {
  0% {opacity: 0;transform: translateY(-30px);}
  to {opacity: 1;transform: translateY(0px);}
}
.loginForm input {
  padding: 1em;
  border-radius: 2em;
  border: 0;
  width: 100%;
}
.loginForm p {
  position: relative;
  margin-top: 2em;
}
.loginForm label { 
  opacity: 0;
  position: absolute;
  font-size: .8em;
  top: -20px;
  left: 15px;
  color: var(--grey-dark);
  transform: translateY(10px);
  transition: all 150ms ease-in-out;
}
.loginForm input:focus + label {
  opacity: 1;
  transform: translateY(0px);
}
.loginForm input:focus::placeholder {
  color: transparent;
}
.loginForm form i {
  float: right;
  z-index: 105;
  position: relative;
  color: var(--grey-dark);
  top: -2em;
  right: 1em;
}
.loginForm button {
  padding: 1em;
  text-align: center;
  border-radius: 2em;
  color: var(--yellow);
  background: var(--blue);
  border: 0;
  display: inline;
  width: 100%;
  transition: all 150ms ease-in-out;
  position: relative;
}
.loginForm button:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
}

/* media query screen size */
@media (max-width: 768px) {
  main, main.login, main.menulock {
    grid-template-columns: 1fr;
    min-height:auto;
  }
  pre{
    white-space: pre-line;
  }
  .interface {
    padding: 1em;
    margin: 1em;
  }
  .interface .title {
    width: 290px;
  }
  .interface .tabs {
    width: auto;
    border-radius:1em;
  }
  .interface .title h1 {
    font-size: 1.2em;
  }
  .interface .tabs h1 {
    width: auto;
  }
  .grid {
    gap: 1em;
    margin-bottom: 1em;
  }
  .menu nav{
    height: auto;
  }
  .menu .burger {
    display: inline-block;
  }
  .menu ul,.menu code {
    display: none;
  }
  .message section {
    background-size: contain;
    margin-bottom: 2em;
    font-size: .8em;
    padding: 0;
  }
  .message img {
    margin: auto;
    max-width: 150px;
  }
  .interface .profile .alert svg {
    top: 16px;
  }
  .interface .program .card .infos small {
    position: relative;
    display: block;
  }
  table.mailing {
    font-size: .7em;
  }  
}
@media (min-width: 768px) {
  .menu ul, .menu.drop ul{
    display:block;
  }
  .interface .dashboard .card {
    grid-column: span 6;
  }
  .interface .dashboard .card:last-child {
    grid-column: span 12;
  }
  .interface .programs .list .container {
    grid-template-columns: 1fr 1fr;
  }
  .interface .table.alert ul li {
    grid-template-columns: repeat(4, 1fr);
  }
  .interface .reservations.table ul li {
    grid-template-columns: repeat(7, 1fr);
  }
  table.mailing {
    font-size: .8em;
  }
}

@media (min-width: 992px) {
  .badge {
    margin:auto 0;
    padding: .4em 1em;
  }
  .interface .welcome time {
    position: absolute;
    margin-left: 0;
    right: 0;
    top: 0;
  }
  .interface .dashboard .total p {
    line-height: 3em;
  }
  .interface .dashboard .total em {
    font-size: 3em;
  }
  .interface .dashboard .total i {
    font-size: 2em;
  }
  .interface .dashpart .card {
    grid-column: span 6;
  }
  .interface .dashpart .card.reservation {
    grid-column: span 8;
  }
  .interface .add .card {
    grid-column: span 6;
  }
  .interface .double .card {
    grid-column: span 6;
  }
  .interface .programs .card {
    grid-column: span 6;
  }
  .interface .programs .list {
    grid-column: span 12;
  }
  .interface .programs .list .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .interface .progs.table ul li {
    grid-template-columns: repeat(8, 1fr);
  }
  .interface .table.by8 ul li {
    grid-template-columns: repeat(8, 1fr);
  }
  .interface .table.by9 ul li {
    grid-template-columns: repeat(9, 1fr);
  }
  .interface .table.alert ul li {
    grid-template-columns: repeat(8, 1fr);
  }
  .interface .lots.table ul li {
    grid-template-columns: repeat(13, 1fr);
  }
  .interface .lots.table.limited ul li {
    grid-template-columns: repeat(7, 1fr);
  }
  .interface .reservations.table ul li {
    grid-template-columns: repeat(7, 1fr);
  }
  .interface .demandes.table ul li {
    grid-template-columns: repeat(8, 1fr);
  }
  .interface .users.table ul li {
    grid-template-columns: repeat(10, 1fr);
  }
  .interface .prospects.table ul li {
    grid-template-columns: repeat(8, 1fr);
  }
  .interface .syntheses.table ul li {
    grid-template-columns: repeat(10, 1fr);
  }
  .interface .accountReservations.table ul li {
    grid-template-columns: repeat(6, 1fr);
  }
  table.mailing td {
    padding: 1em;
  }
}

@media (min-width: 1200px) {
  .interface .dashboard .card, .interface .dashboard .card:last-child {
    grid-column: span 4;
  }
  .interface .add .card {
    grid-column: span 4;
  }
  .interface .lots.filter ul:last-child {
    position: relative;
    right: initial;
  }
  .interface .programs .card {
    grid-column: span 4;
  }
  .interface .programs .list {
    grid-column: span 12;
  }
  .interface .programs .list .container {
    grid-template-columns: 2fr 3fr 1.25fr 2fr 2.5fr .25fr;
  }
  .interface .dashboard .total em {
    font-size: 4em;
  }
  .interface .program .gallery{
    grid-column: span 6;
  }
  .interface .program .infos{
    grid-column: span 6;
  }
  .interface .program .infos .inside {
    grid-template-columns: 1fr;
  }
  .interface .program .infos .inside .download li {
    grid-column: span 1;
  }
  .interface .stats .card {
    grid-column: span 6;
  }
}

@media (min-width: 1400px) {
  .interface .filter ul:last-child {
    position: absolute;
    right: 1.5em;
  }
  .interface .lots.filter ul:last-child {
    position: absolute;
    right: 1.5em;
  }
  .interface .dashboard .total em {
    font-size: 4em;
  }
  .interface .dashboard .total i {
    font-size: 2.6em;
    padding: .2em 0;
  }
  .interface .dashpart .card {
    grid-column: span 4;
  }
  .interface .program .gallery{
    grid-column: span 5;
  }
  .interface .program .infos{
    grid-column: span 7;
  }
  .interface .program .infos .inside {
    grid-template-columns: 1fr 1fr;
  }
  .interface .program .infos .certification {
    grid-template-columns: repeat(4, 1fr);
  }
  .interface .lots ul,
  .interface .users ul,
  .interface .prospects ul,
  .interface .reservations ul,
  .interface .syntheses ul,
  .interface .accountReservations ul {
    position: relative;
  }
  .interface .lots .stickyLabel.on,
  .interface .users .stickyLabel.on,
  .interface .prospects .stickyLabel.on,
  .interface .reservations .stickyLabel.on,
  .interface .syntheses .stickyLabel.on,
  .interface .accountReservations .stickyLabel.on {
    box-shadow: 0 .2em 1em 0 var(--grey);
    border-radius: 1em;
    position: fixed;
    max-width: 1603px;
    z-index: 102;
    top: 0;
    opacity: 0;
    transform: translateY(-30px);
    animation: dropIn 750ms .50ms ease forwards;
  }
  .interface .lots.table label,
  .interface .reservations.table label,
  .interface .syntheses.table label,
  .interface .accountReservations.table label {
    padding:.4em 0;
  }
  
  /*
  .interface .lots.table ul li {
    /* grid-template-columns: repeat(18, 1fr);*/ /*
    grid-template-columns:
      /* PROG BAT NIV NUM TYPE SH BAL 
      VAR TER LOG SD JARD CAV PARK PP PRIX
      NOT LOY LOI DEFISC EXP DOC STAT FIL ACT */ /*
      1fr .5fr .5fr .5fr .5fr .75fr .5fr
      .5fr .5fr .5fr .75fr .5fr .5fr .5fr .75fr
      1.25fr .75fr .5fr 1fr .75fr .5fr
      .5fr  1.25fr .5fr 1.25fr;
  }
  */

  /* regroupement en annexe */
  .interface .lots.table ul li {
    /* grid-template-columns: repeat(18, 1fr);*/
    grid-template-columns:
      /* PROG BAT NIV NUM TYPE SH ANX
      SD JARD CAV PARK PP PRIX
      NOT LOY LOI DEFISC EXP DOC STAT FIL ACT */
      1fr .5fr .5fr .5fr .5fr .75fr .75fr
      .75fr .5fr .5fr .5fr .75fr
      1.25fr .75fr .5fr 1fr .75fr .5fr
      .5fr  1.25fr .5fr 1.25fr;
  }
  
  .interface .lots.table.limited ul li {
    /* grid-template-columns: repeat(18, 1fr);*/
    grid-template-columns:
    /* BAT NIV NUM STAT TYPE SH BAL 
      VAR TER LOG SD JARD CAV PARK PP PRIX
      NOT LOY LOI DEFISC EXP DOC */
    .5fr .5fr .5fr .75fr 1.25fr .75fr
    .5fr .5fr .5fr .5fr .5fr .5fr .5fr .5fr
    .75fr 1.25fr .75fr .75fr .75fr
    .5fr 1.25fr;
  }
  .interface .syntheses.table ul li {
   /* grid-template-columns: repeat(19, 1fr);*/
   grid-template-columns:
      1fr .75fr 1fr
      .75fr 1fr 1fr 
      1.25fr 1fr 1fr
      1fr 1fr 1fr 1fr
      1fr 1fr .5fr
      .5fr 2fr .75fr;
  }
  .interface .reservations.table ul li {
    /* grid-template-columns: repeat(20, 1fr);*/
    grid-template-columns:
      .75fr .5fr 1fr 1fr
      1fr .5fr .5fr .5fr
      .5fr .5fr 1fr .5fr
      .5fr .5fr 1fr .5fr
      .5fr .5fr 1fr 1fr .5fr
  } 
}

@media (min-width: 1600px) {
  .interface .programs .card {
    grid-column: span 3;
  }
  .interface .stats .card {
    grid-column: span 4;
  } 
}

@media (min-width: 2200px) {
  .interface .programs .card {
    grid-column: span 2;
  }
}