.reservation{
  position: relative;
}

.reservation .main {
  display: flex;
  flex-wrap: wrap;
  gap:  var(--gap);
  width: 100%;  
  padding-top: var(--gap);
  padding-bottom: var(--gap);  
}

.reservation .process {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 40%;
  background-color: #FFFFFFDD;
  padding: var(--gap);
  min-height: 150px;  
}
.reservation .process fieldset{ 
  border:  1px solid #000;
  height: 100%;
  position: relative;
  padding: 0;
  /*margin-bottom: 80px;*/
  padding-left: var(--gap);
  padding-right: var(--gap);  
}

.reservation .process fieldset .next{
  margin-right: calc(-1 * var(--gap));
}
.reservation .process fieldset .previous{
  margin-left: calc(-1 * var(--gap));
}
.reservation .process fieldset .absolute.center{
  bottom: var(--gap);
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
}
  

.reservation .process fieldset p{
  margin: 0;
}

.reservation .process fieldset .btn{
  background-color:  var(--color-p);  
}
.reservation .process fieldset .btn:hover{
  background-color:  var(--color-primary);
  color: #FFF;
}

.reservation .process fieldset .btn.active{
  background-color:  var(--color-primary);
  cursor: default;
}

.reservation .process fieldset .btn.primary{
  background-color:  var(--color-primary);  
  color: #FFF;
}
.reservation .process fieldset .btn.primary:hover{
  background-color: #FFF;
  color: var(--color-p);
}

.reservation .process fieldset ul.buttons{
  list-style: none;
  display: inline-flex;
}

.reservation .process legend{ 
  padding-left: var(--gap);
  padding-right: var(--gap);
  margin-right: var(--gap);

}

div.btn-nav{  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;    
  margin-top: 50px;  
}


.reservation .group-select{
    margin-bottom: 5px;
}
.reservation .group-select select{             
  font-family: var(--font-texte);
  font-size: 16px;
  height: 40px;  
  line-height: 40px;
  min-width: 75px;
  max-width: 85%;
  border: 1px solid var(--color-primary);  
  color: var(--color-p);
  background-color: #FFF;
  border-radius: 0px;
  padding: 0 5px;
  text-align: right;
  margin-right: var(--gap);  
}
.reservation span.complement{
  padding-left: var(--gap);
  font-size: 1.4rem;
}

.reservation .group-select label{    
  display: inline-block;
  font-size: 1.8rem;
}

a.btn.disabled[data-step],
a.btn.primary.disabled[data-step]{
  pointer-events: none;
  background-color: gray;
  color: lightgray;
}

.reservation .process p.option-obligatoire{
  margin-top: 30px;
}

.reservation .process select[data-pickup],
.reservation .process select[data-insurance]{
  text-align: left;
}
.reservation .process p.pickup-adresse{
  font-style: italic;
}

.reservation .process table{
  width: 100%;
  max-width: 700px;  
  border: 1px solid var(--color-p);
  border-collapse: collapse;
}
.reservation .process table tr{
  font-size: 1.8rem;
}
.reservation .process div[data-summary="821"] table,
.reservation .process div[data-summary="822"] table{
  border-top: none; 
}
.reservation .process table td:nth-child(1n){
  width: 40%;
  text-align: left;
}
.reservation .process table td:nth-child(2n),
.reservation .process table td:nth-child(4n){
  text-align: right;
  width: 22%;
}
.reservation .process table td:nth-child(3n){
  width: 11%;
  text-align: center;
}

.reservation .process div[data-summary="822"] table tbody td:nth-child(1n) {
  border-top: none;
}
.reservation .process table tfoot td{
  
  font-weight: 600;
  font-size: 1.8rem;
  border-top: 1px solid var(--color-p);
}
.reservation .process table tfoot td:nth-child(1n){
  font-size: 1.8rem;
  text-align: left
}
.reservation .process table tfoot td:nth-child(2n){
  font-size: 1.8rem;
  text-align: right;
}
.reservation .process table thead td{
  font-weight: 600;
  font-size: 1.8rem;
  border-bottom: 1px solid var(--color-p);
}

.reservation .process table td{
  padding: 5px var(--gap);
  vertical-align: top;
}

.reservation .process table td.border-top{
  border-top: 1px solid grey;
  font-weight: 500;
}

.reservation .process .group {
  position: relative;
  padding: var(--gap) 0;
  margin-top: 5px;
  width: 100%;
  max-width: 480px;
}

.reservation .process [data-participant] h3 {
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 2rem;
  overflow: hidden;
  text-align: left;
  padding-left: calc(var(--gap) * 2 );
  width: 100%;
  margin: 50px 0 10px 0;
}

.reservation .process [data-participant] h3:before,
.reservation .process [data-participant] h3:after {
  background-color: lightgray;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.reservation .process [data-participant] h3:before {
  right: 0.5em;
  margin-left: -50%;
}

.reservation .process [data-participant] h3:after {
  left: 0.5em;
  margin-right: -50%;
  width: 100%;
}


.reservation .process .group input {
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--color-p);
  outline: 0;
  font-size: 1.8rem;
  color: var(--color-p);
  padding: 5px 0;
  background: transparent;
  transition: border-color 0.3s ease;
}

.reservation .process .group input::placeholder {
  color: transparent;
}
.reservation .process .group input:placeholder-shown ~ label {
  font-size: 1em;
  cursor: text;
  top: 20px;
}

.reservation .process .group label{
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1.3rem;
  color: grey;
}

.reservation .process .group input:focus {
  padding-bottom: 5px;  
  border-color: var(--color-primary);
  border-width: 2px;
}

.reservation .process .plan{
  position: relative;
  width: 180px;
  height: 800px;  
}
.reservation .process .plan div.seat,
.reservation .process .plan div.seat-clic {
  position: absolute;
  width: 33px;
  height: 33px;
}

.reservation .process .bus{
  display: flex;
  flex-wrap: wrap;
  gap:  50px;
  align-items: flex-start;
}

.reservation .process .legend {
  border: 1px solid lightgrey;
      padding: var(--gap);
}
.reservation .process .legend p{
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-bottom: var(--gap);

}
.reservation .process .legend p:last-child{
  margin-bottom: 0;
}

.reservation .process .legend p span{
  display: inline-block;
  width: 50px;
  height: 30px;
  margin-right: var(--gap);
}

.reservation .process .legend p span.occupied{
  background-color: red;
}
.reservation .process .legend p span.free{
  background-color: green;
}
.reservation .process .legend p span.selected{
  background-color: skyblue;
}

.reservation .process .plan div.seat{
  background-color: red;
}

.reservation .process .plan div.seat-clic {
  cursor: pointer;
  z-index: 2;
}

.reservation .process .plan div.seat.free{
  background-color: green;  
}
.reservation .process .plan div.seat.free.selected{
  background-color: skyblue;  
}

.reservation .process .plan [data-number="11"] {
  top:  var(--seat-v-1);
  left:  var(--seat-h-1);
}
.reservation .process .plan [data-number="12"] {
  top:  var(--seat-v-1);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="13"] {
  top:  var(--seat-v-1);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="14"] {
  top:  var(--seat-v-1);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="21"] {
  top:  var(--seat-v-2);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="22"] {
  top:  var(--seat-v-2);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="23"] {
  top:  var(--seat-v-2);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="24"] {
  top:  var(--seat-v-2);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="31"] {
  top:  var(--seat-v-3);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="32"] {
  top:  var(--seat-v-3);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="33"] {
  top:  var(--seat-v-3);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="34"] {
  top:  var(--seat-v-3);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="41"] {
  top:  var(--seat-v-4);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="42"] {
  top:  var(--seat-v-4);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="43"] {
  top:  var(--seat-v-4);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="44"] {
  top:  var(--seat-v-4);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="51"] {
  top:  var(--seat-v-5);
  left:  var(--seat-h-1);
}
.reservation .process .plan [data-number="52"] {
  top:  var(--seat-v-5);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="53"] {
  top:  var(--seat-v-5);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="54"] {
  top:  var(--seat-v-5);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="61"] {
  top:  var(--seat-v-6);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="62"] {
  top:  var(--seat-v-6);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="63"] {
  top:  var(--seat-v-6);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="64"] {
  top:  var(--seat-v-6);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="71"] {
  top:  var(--seat-v-7);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="72"] {
  top:  var(--seat-v-7);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="73"] {
  top:  var(--seat-v-7);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="74"] {
  top:  var(--seat-v-7);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="81"] {
  top:  var(--seat-v-8);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="82"] {
  top:  var(--seat-v-8);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="83"] {
  top:  var(--seat-v-8);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="84"] {
  top:  var(--seat-v-8);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="91"] {
  top:  var(--seat-v-9);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="92"] {
  top:  var(--seat-v-9);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="93"] {
  top:  var(--seat-v-9);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="94"] {
  top:  var(--seat-v-9);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="101"] {
  top:  var(--seat-v-10);
  left:  var(--seat-h-1);
}
.reservation .process .plan [data-number="102"] {
  top:  var(--seat-v-10);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="103"] {
  top:  var(--seat-v-10);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="104"] {
  top:  var(--seat-v-10);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="111"] {
  top:  var(--seat-v-11);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="112"] {
  top:  var(--seat-v-11);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="113"] {
  top:  var(--seat-v-11);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="114"] {
  top:  var(--seat-v-11);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="121"] {
  top:  var(--seat-v-12);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="122"] {
  top:  var(--seat-v-12);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="123"] {
  top:  var(--seat-v-12);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="124"] {
  top:  var(--seat-v-12);
  left: var(--seat-h-4);
}
.reservation .process .plan [data-number="131"] {
  top:  var(--seat-v-13);
  left: var(--seat-h-1);
}
.reservation .process .plan [data-number="132"] {
  top:  var(--seat-v-13);
  left: var(--seat-h-2);
}
.reservation .process .plan [data-number="133"] {
  top:  var(--seat-v-13);
  left: var(--seat-h-3);
}
.reservation .process .plan [data-number="134"] {
  top:  var(--seat-v-13);
  left: var(--seat-h-4);
}
.reservation .process .plan img {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 800px;
  z-index: 1;
}

.reservation .process .min-with-btn{
  min-width: 135px;
}
/*
.reservation .process .group input:focus ~ label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 0.8em;
  color: var(--color-primary);
}
*/


[data-list-participant]{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--gap);  
}
[data-list-participant] a{
  margin-right: 20px;
}


/* RECAP */

.reservation .summary {
  flex-grow: 1;
  flex-basis: 400px;
  align-self: start;
  position: sticky;
  top: 100px;
  background-color: #FFFFFFDD;
  min-height: 150px;
  font-size: 1.8rem;
}

.reservation .summary .title{
  padding: var(--gap);
  font-family: var(--font-text);
  font-size: 1.8rem;
  font-weight: 600;  
  text-align: center;
}

.reservation .summary .content{
  min-height: 150px;
  text-align: right;
  padding: var(--gap);
}
.reservation .summary .content p{
  margin: 0;
}

.reservation .summary .total{
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: var(--gap);
  font-family: var(--font-text);
  font-size: 1.8rem;
  font-weight: 600;  
  padding: var(--gap) 0 var(--gap) var(--gap); 
}

.reservation .summary .total .left{
  text-align: right;
  width: 50%;
}

.reservation .summary .total .right{
  text-align: left;
  background-color: #000;
  width: 50%;
  padding: 5px calc(var(--gap) * 2);
  color:  #FFF;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}







/* LOADER */
.reservation-loader{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 100vh;
  width: 100%;
  margin: 0;
  background-color: #FFF;  
}
.reservation-loader p{
  font-size: 3rem;
}

/* MOSAIC LOADER */
.mosaic-loader {
  --cell-size: 64px;
  --cell-spacing: 1px;
  --border-width: 1px;
  --cells: 4;
  --total-size: calc(var(--cells) * (var(--cell-size) + 2 * var(--cell-spacing)));
  display: flex;
  flex-wrap: wrap;
  width: var(--total-size);
  height: var(--total-size);
}
.mosaic-loader > .cell {
  --cell-color: white;
  flex: 0 0 var(--cell-size);
  margin: var(--cell-spacing);
  background-color: transparent;
  box-sizing: border-box;
  border: var(--border-width) solid var(--cell-color);
  animation: 1.5s ripple ease infinite;
}
.mosaic-loader > .cell.d-1 {
  animation-delay: 100ms;
}
.mosaic-loader > .cell.d-2 {
  animation-delay: 200ms;
}
.mosaic-loader > .cell.d-3 {
  animation-delay: 300ms;
}
.mosaic-loader > .cell.d-4 {
  animation-delay: 400ms;
}
.mosaic-loader > .cell.d-5 {
  animation-delay: 500ms;
}
.mosaic-loader > .cell.d-6 {
  animation-delay: 600ms;
}
.mosaic-loader > .cell:nth-child(1) {
  --cell-color: #d4aee0;
}
.mosaic-loader > .cell:nth-child(2) {
  --cell-color: #8975b4;
}
.mosaic-loader > .cell:nth-child(3) {
  --cell-color: #64518a;
}
.mosaic-loader > .cell:nth-child(4) {
  --cell-color: #565190;
}
.mosaic-loader > .cell:nth-child(5) {
  --cell-color: #44abac;
}
.mosaic-loader > .cell:nth-child(6) {
  --cell-color: #2ca7d8;
}
.mosaic-loader > .cell:nth-child(7) {
  --cell-color: #1482ce;
}
.mosaic-loader > .cell:nth-child(8) {
  --cell-color: #05597c;
}
.mosaic-loader > .cell:nth-child(9) {
  --cell-color: #b2dd57;
}
.mosaic-loader > .cell:nth-child(10) {
  --cell-color: #57c443;
}
.mosaic-loader > .cell:nth-child(11) {
  --cell-color: #05b853;
}
.mosaic-loader > .cell:nth-child(12) {
  --cell-color: #19962e;
}
.mosaic-loader > .cell:nth-child(13) {
  --cell-color: #fdc82e;
}
.mosaic-loader > .cell:nth-child(14) {
  --cell-color: #fd9c2e;
}
.mosaic-loader > .cell:nth-child(15) {
  --cell-color: #d5385a;
}
.mosaic-loader > .cell:nth-child(16) {
  --cell-color: #911750;
}

@keyframes ripple {
  0% {
    background-color: transparent;
  }
  30% {
    background-color: var(--cell-color);
  }
  60% {
    background-color: transparent;
  }
  100% {
    background-color: transparent;
  }
}
/* FIN MOSAIC LOADER */


.reservation-loader .text{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.gooey {
  width: 142px;
  height: 40px;
  margin: 10px 0 0 0;
  background: #fff;
  filter: contrast(20);
}
.gooey .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  filter: blur(4px);
  background: #000;
  border-radius: 50%;
  transform: translateX(0);
  animation: dot 2.8s infinite;
}
.gooey .dots {
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  animation: dots 2.8s infinite;
}
.gooey .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  filter: blur(4px);
  background: #000;
  border-radius: 50%;
}
@-moz-keyframes dot {
  50% {
    transform: translateX(96px);
  }
}
@-webkit-keyframes dot {
  50% {
    transform: translateX(96px);
  }
}
@-o-keyframes dot {
  50% {
    transform: translateX(96px);
  }
}
@keyframes dot {
  50% {
    transform: translateX(96px);
  }
}
@-moz-keyframes dots {
  50% {
    transform: translateX(-31px);
  }
}
@-webkit-keyframes dots {
  50% {
    transform: translateX(-31px);
  }
}
@-o-keyframes dots {
  50% {
    transform: translateX(-31px);
  }
}
@keyframes dots {
  50% {
    transform: translateX(-31px);
  }
}

@media (max-width: 480px) {
  .reservation .process table td:nth-child(2){
    display: none;
  }
  .reservation .process table td:nth-child(3){
    display: none;
  }

  .reservation .process div[data-summary="822"] table tbody td:nth-child(1n) {
    border-top: none;
  }

  .reservation .group-select{
    display: flex;
  }
  .reservation .group-select select{
    min-width:  55px;
    margin-right: 5px;
  }

  .reservation .btn-nav{    
    flex-direction: column;
  }
  .reservation .btn.square-left{
    border-top-left-radius : 50px;
    border-bottom-left-radius : 50px;
    margin: var(--gap) 0;
  }
  .reservation .btn.square-right{
    border-top-right-radius : 50px;
    border-bottom-right-radius : 50px;
    margin: var(--gap) 0;
  }
  .reservation .process fieldset .previous{
    margin: 0;
  }
  .reservation .process fieldset .next{
    margin: 0;
  }
  .reservation .group-select.grid-select{
    display: grid;
  }
}