/************************************/
/*** Gîte du Moulin de Warnecourt ***/
/*********** Last modified **********/
/************* 26/08/2026 ***********/
/************************************/

body {
  --title-font: "Fleur De Leah", cursive; /* h1 */
  --title-font-weight: 400;
  --title-font-size-h1: 3.5rem;
  --title-font-size-h2: 3rem;

  --heading-font: "Grape Nuts", cursive; /* h2-h3-h4-h5-h6 */
  --heading-font-weight: 600;
  --heading-color: var(--bs-dark);
  --heading-line-height: 1.24;

  --heading-font-size-h3: 3rem;
  --heading-font-size-h4: 2rem;
  --heading-font-size-h5: 1.5rem;

  /* bootstrap */
  --bs-body-font-family: "Elms Sans", sans-serif; /* main font */
  --bs-body-font-size: 1.1rem;
  --bs-body-font-weight: 300;
  --bs-body-line-height: 1.5;
  --bs-body-color: #444; /*8f8f8f;*/
  --bs-body-color-rgb: 143, 143, 143;

  --bs-primary: #e73c13;
  --bs-primary-dark: #be3b1a;
  --bs-secondary: #6c757d;
  --bs-black: #020202;
  --bs-light: #f1f1f0;
  --bs-dark: #212529;
  --bs-gray: #9aa1a7;
  --bs-gray-dark: #51565b;

  --bs-primary-rgb: 231, 60, 19;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-black-rgb: 2, 2, 2;
  --bs-light-rgb: 241, 241, 240;
  --bs-dark-rgb: 33, 37, 41;

  --bs-link-color: var(--bs-dark);
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-decoration: underline;
  --bs-link-hover-color: var(--bs-primary);
  --bs-link-hover-color-rgb: 17, 17, 17;
}

@media only screen and (max-width: 991px) {
  body {
    --bs-body-font-size: 1.2rem;
  }
}

#header-top {
	@media (width <= 1024px) {
    display: none;
	}
}

/*-------------------------------*/
/*------ main ------*/

body {
	background: #aad989; /*ff8559;*/
}

#main-container {
  position: absolute;
  width: 99vw;
  height: auto;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 !important;
}

#header {
	position: relative;
	background: #fff;
	width: 95%;
	margin: 0 auto;
	padding: 0 25px;
}

#main-content {
	position: relative;
	background: #fff;
	width: 95%;
	margin: 0 auto;
	padding: 0 0 50px 0;
}

#footer {
	position: relative;
	background: #fff;
	width: 95%;
	margin: 0 auto;
	padding: 0;
	border-top: 1px dashed #999;
}
	
.logo-thumb  {
	max-height: 200px !important;
}

/* titres & textes */

.display-1 {
    font-family: var(--title-font);
    font-size: var(--title-font-size-h1);
	font-weight: var(--title-font-weight);
}

.display-2 {
    font-family: var(--title-font);
    font-size: var(--title-font-size-h2);
	font-weight: var(--title-font-weight);
}

.display-3 {
    font-family: var(--heading-font);
    font-size: var(--heading-font-size-h3);
	font-weight: var(--heading-font-weight);
}
 
.display-4 {
    font-family: var(--heading-font);
    font-size: var(--heading-font-size-h4);
	font-weight: var(--heading-font-weight);
}

.display-5 {
    font-family: var(--heading-font);
    font-size: var(--heading-font-size-h5);
	font-weight: var(--heading-font-weight);
}

.text-standard {
	position: relative;
	padding: 25px 0 0 0 !important;
	font-size: 0.95rem !important;
	color: #000 !important;
}

/*----- headers rubriques -----*/

h5 {
  position: relative;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}

h5 span {
  display: block;
}

/*----- heading style #1 -----*/
/*--- https://codepen.io/adriceb_02/pen/zYbGrxx ---*/

.heading-one {
  margin: 0 auto;
  text-align: center;
  padding-bottom: 5px;
}

.heading-one h5 {
  text-align: center;	
}

.heading-one h5:before {
  width: 60px;
  height: 5px;
  display: block;
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-top: 15px;
  margin-left: -30px;
  background-color: #b80000;
}

.heading-one h5:after {
  width: 400px;
  height: 1px;
  display: block;
  content: "";
  position: relative;
  margin-top: 15px;
  left: 50%;
  margin-left: -200px;
  background-color: #b80000;
}

.heading-one h5 span {
  font-size: 2rem;
  line-height: 2em;
  padding-left: 0.25em;
  color: rgba(0, 0, 0, 0.4);
  padding-bottom: 10px;
}

/*---------------row_s----------------*/

.row_1 {
	padding: 30px 0 30px;
	margin: 0 auto;
	max-width: 100%;
	background-color: #fff;
	text-align: center;
}

.row_2 {
	padding: 60px 0 30px;
	margin: 0 auto;
	max-width: 100%;
	background: #f5f5f5; /*  url('img/bg2.jpg') 0 0 repeat-x;*/
/*
   background-color: teal;
   background-image:  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuZGV2L3N2Z2pzIiB2aWV3Qm94PSIwIDAgNzAwIDcwMCIgd2lkdGg9IjcwMCIgaGVpZ2h0PSI3MDAiIG9wYWNpdHk9IjAuODQiPjxkZWZzPjxmaWx0ZXIgaWQ9Im5ubm9pc2UtZmlsdGVyIiB4PSItMjAlIiB5PSItMjAlIiB3aWR0aD0iMTQwJSIgaGVpZ2h0PSIxNDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHByaW1pdGl2ZVVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJsaW5lYXJSR0IiPgoJPGZlVHVyYnVsZW5jZSB0eXBlPSJ0dXJidWxlbmNlIiBiYXNlRnJlcXVlbmN5PSIwLjIiIG51bU9jdGF2ZXM9IjQiIHNlZWQ9IjE1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIiB4PSIwJSIgeT0iMCUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHJlc3VsdD0idHVyYnVsZW5jZSI+PC9mZVR1cmJ1bGVuY2U+Cgk8ZmVTcGVjdWxhckxpZ2h0aW5nIHN1cmZhY2VTY2FsZT0iMjYiIHNwZWN1bGFyQ29uc3RhbnQ9IjMiIHNwZWN1bGFyRXhwb25lbnQ9IjIwIiBsaWdodGluZy1jb2xvcj0iIzA1Njk2OSIgeD0iMCUiIHk9IjAlIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBpbj0idHVyYnVsZW5jZSIgcmVzdWx0PSJzcGVjdWxhckxpZ2h0aW5nIj4KICAgIAkJPGZlRGlzdGFudExpZ2h0IGF6aW11dGg9IjMiIGVsZXZhdGlvbj0iMTc4Ij48L2ZlRGlzdGFudExpZ2h0PgogIAk8L2ZlU3BlY3VsYXJMaWdodGluZz4KICAKPC9maWx0ZXI+PC9kZWZzPjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9yZWN0PjxyZWN0IHdpZHRoPSI3MDAiIGhlaWdodD0iNzAwIiBmaWxsPSIjMDU2OTY5IiBmaWx0ZXI9InVybCgjbm5ub2lzZS1maWx0ZXIpIj48L3JlY3Q+PC9zdmc+"), linear-gradient(#ebf7ef, #63a498); */

}

.row_3 {
	padding: 30px 0 30px;
	margin: 0 auto;
	max-width: 100%;
	background: #fff;
}

.row_4 {
	padding: 30px 0 30px;
	margin: 0 auto;
	max-width: 100%;
	background: #fff;
}

.row_5 {
	padding: 30px 0 30px;
	margin: 0 auto;
	max-width: 100%;
	background: #fff;
}

.liste-activites {
	padding: 0 40px;
	margin: 0 auto;
	background: url('img/logo-woinic.jpg') 0 175px no-repeat;
	background-color: rgba(255, 255, 255, 0.85);
	background-blend-mode: lighten;
}

/*---------------text & colors & links ------------------*/

.text-75 {
  font-size: 75% !important;
  text-transform: lowercase !important;
}

.text-85 {
  font-size: 85% !important;
}

.color-1 {
	color: #f06d56 !important; /* orange 1 */
}

.color-2 {
	color: #fa9c2e !important; /* orange 2 */
}

.color-3 {
	color: #edb315 !important; /* orange 3 */
}

.color-4 {
	color: #f45702 !important; /* orange 4 */
}

.color-5 {
	color: #0289B0 !important; /* blue 1 */
}

a.link-standard, a.link-standard:visited, a.link-standard:active {
  color: #444;
  text-decoration: none;
  border-bottom: 0.05rem black dashed;
  font-style: italic;
}

a.link-standard:hover {
  border-color: red !important;
}

/* screen GPX on hover */

.hover-link {
  position: relative;
  text-decoration: none;
  color: #007bff;
}

.hover-link .hover-image-container {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  padding-top: 5px;
}

.hover-link .hover-image-container img {
  display: block;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

.hover-link:hover .hover-image-container {
  display: block;
}

/************* header ***************/

/*-------- logo -------- */

.navbar-brand {
	float: none;
	display: block;
	position: relative;
	text-align: center;
	padding: 10px 0 10px;
	margin: 0;
}

.navbar-brand a:hover {
	text-decoration: none;
}

/*-------- ajustements menu + responsive -------- */

.sticky-top-menu {
	z-index: 100 !important;
	width: 95%;
	height: 60px;
	margin: 0 auto;
	background: #63a498;
	color: #fff;
	text-align: center;
	border-style: double none double none;
}

.nav-link {
	color: #fff !important;
}

.navbar .show .offcanvas-body .nav-link {
	color: #000 !important;
}

/*-----------------navbar---------------------*/

/* no particular style -- using bootstrap default */

/*-------------------HR------------------*/

hr {
    border: 0 solid;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 133, 89, 90%), rgba(0, 0, 0, 0));
    margin: 30px 0 10px;
    display: block;
}

hr::before {
    position: absolute;
    left: 47%;
    margin: -80px 0px 0px 0px;
    content: "•••";
    font-size: 6rem;
    color: #ff8559;
}

/*----- titles -----*/

.title-1 {
	overflow: hidden;
	padding: 15px 0 5px;
	position: relative;
	color: #a54918;
}

.title-1 .title-1-left {
	position: relative;
	display: inline-block;
	content: "";
	width: 25px;
	height: 12px;
	background: url('img/title1_1.png') no-repeat 0 0;
	top: -6px;
	right: 17px;
}

.title-1 .title-1-right {
	display: inline-block;
	position: relative;
	content: "";
	width: 25px;
	height: 12px;
	background: url('img/title1_2.png') no-repeat 0 0;
	top: -6px;
	left: 16px;
}

.title-2 {
	color: #a54918;
}

/**--------book now title-------**/
/*-- https://codepen.io/vii120/pen/KwMBaaY --*/

.book-now-text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 101;
  margin-top: 25px;
}

.book-now-text {
  width: fit-content;
  padding: 0 15px;
  position: relative;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  
  font-family: "Grape Nuts", cursive;
  font-weight: 600;
  font-style: normal;
  font-size: 1.75rem;
}

.book-now-text:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 100;
  border-radius: 3px 5px 3px 5px;
  background: conic-gradient(at 0 100%, rgb(var(--mark-color)/100%) 1%, #fff0 3%) no-repeat 0 0/auto 120%, conic-gradient(from 180deg at 100% 0, #fff0, rgb(var(--mark-color)/100%) 1%, #fff0 4%) no-repeat 100% 100%/auto 120%, linear-gradient(var(--mark-bg-angle), rgb(var(--mark-color)/60%), rgb(var(--mark-color)/20%) 75%, rgb(var(--mark-color)/55%)) no-repeat center/auto;
}

.book-now-text.yellow-mark:before {
  rotate: 1deg;
  scale: 1.1;
  transform: skew(-5deg);
  --mark-color: 255 232 62;
  --mark-bg-angle: 50deg;
}

.book-now-text.green-mark:before {
  scale: 0.92;
  transform: skew(7deg);
  --mark-color: 91 233 92;
  --mark-bg-angle: 30deg;
}

.book-now-text.red-mark:before {
  rotate: 0.5deg;
  transform: skew(5deg);
  --mark-color: 255 100 185;
  --mark-bg-angle: 150deg;
}

/************** header end **************/
/************** content **************/

/* cut corners -- https://codepen.io/Evirtual/pen/BjLPOj */

.outter {
  position: relative;
  border: 1px solid #888;
  padding: 5px;
  margin-top: -170px;
  height: auto;
}

.left:before,
.right:before {
  content: "";
  padding: 20px;
  background-color: #fff;
  position: absolute;
  border: 1px solid #888;
}

.left:after,
.right:after {
  content: "";
  padding: 20px;
  background-color: #f5f5f5;
  position: absolute;
  border: 1px solid #888;
}

.left-outter:before,
.left-outter:after,
.right-outter:before,
.right-outter:after{
  z-index: 1;
}

.left:before {
  top: -1px;
  left: -1px;
  border-top: 0;
  border-left: 0;
  border-bottom-right-radius: 40px; 
}

.left:after {
  bottom: -1px;
  left: -1px;
  border-bottom: 0;
  border-left: 0;
  border-top-right-radius: 40px; 
}

.right:before {
  top: -1px;
  right: -1px;
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 40px; 
}

.right:after {
  bottom: -1px;
  right: -1px;
  border-bottom: 0;
  border-right: 0;
  border-top-left-radius: 40px; 
}

.right:after {
  bottom: -1px;
  right: -1px;
  border-bottom: 0;
  border-right: 0;
  border-top-left-radius: 40px; 
}

.inner {
  position: relative;
  border: 1px solid #888;
  height: 160px;
  background: #ebf7ef;
  height: auto;
}

.insider {
  position: relative;
  border: 0px solid #888;
  padding: 20px 50px;
  text-align: justify;
  font-size: 1rem;
  color: #000;
  height: auto;
}

object-fit: fill;

/*----- equipements -- https://codepen.io/seyedi/pen/bGZELNm -----*/

/* from -- @import url("https://unpkg.com/papercss@1.9.2/dist/paper.css") layer(csspaper); */

.shadow.shadow-large {
    transition: all 235ms ease 0s;
    box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
}

.shadow {
    transition: all 235ms ease 0s;
    box-shadow: 15px 28px 25px -18px rgba(0, 0, 0, 0.2);
}

.card-list .border, .card-list .border-1, .card-list .child-borders > *:nth-child(6n+1) {
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
}

.card-list .border {
    border-color: #41403e;
    border-color: var(--primary);
    border-style: solid;
    border-width: 2px;
}

.paper {
    background-color: #41403e;
    background-color: var(--main-background);
    border: 1px solid #cdcccb;
    box-shadow: -1px 5px 35px -9px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: 2rem;
}

.card-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media only screen and (max-width: 991px) {
.card-list {
  grid-template-columns: 1fr;
}
}

.card-list li {
  margin: 0;
}

.card-list li::before {
  content: "";
}

.card-list h1 {
  font-size: 2.2rem;
}

.card-list h2 {
  font-size: 1.5rem;
  margin: 0;
}

.card-list-items, .card-list-items-sub {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.card-list span {
  font-size: 1.25rem;
  font-weight: 600;
}

.icon-rubrique-color-1 {
    color: #f06d56;
}

/* paper card list 2 */

.card-list-2 .border, .card-list-2 .border-1, .card-list-2 .child-borders > *:nth-child(6n+1) {
    border-bottom-left-radius: 15px 255px;
    border-bottom-right-radius: 225px 15px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
}

.card-list-2 .border {
    border-color: #41403e;
    border-color: var(--primary);
    border-style: solid;
    border-width: 2px;
}

.paper {
    background-color: #41403e;
    background-color: var(--main-background);
    border: 1px solid #cdcccb;
    box-shadow: -1px 5px 35px -9px rgba(0, 0, 0, 0.2);
    margin-bottom: 1rem;
    margin-top: 0rem;
    padding: 2rem;
}

.card-list-2 {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media only screen and (max-width: 991px) {
.card-list-2 {
  grid-template-columns: 1fr;
}
}

.card-list-2 li {
  margin: 0;
}

.card-list-2 li::before {
  content: "";
}

#tls-title, #tls-title-1 { 
  margin: 0 0 20px 0;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 3rem;
  color: #f06d56;
}

/* list of links */

/*removes original number*/
.tls-liste ul {
  list-style-type: none;
}

.tls-liste ul li {
  position: relative;
  display: block; 
  border-bottom: 1px dashed #ccc;
  margin-left: 20px;
  list-style-position: outside;
  
  font-size: 1.25rem;
  line-height: 32px;
  color: #000;
  text-indent: 0 !important;
  
  padding: 20px 0 0 20px;
}

.tls-liste ul li:before {
  content: url('img/icons/icon-museum-3.png');
}

.tls-liste ul li:before {
  position: absolute;
  margin-left: -70px;
  color: #ccc;
}

.tls-liste li p {
  margin-top: 5px;
  font-size: 0.95rem;
  line-height: 20px;
  color: #555;
}

.tls-liste ul {
  max-width: 500px; /* remove if full width */
  text-align: justify;
  margin-left: 20px;
}

.icon-google-maps {
  width: 35px;
}

/*----- carousel "en Ardenne" -- https://codepen.io/murias/pen/OJKyNdz -----*/

.for-flags span {
    margin-top: -50px !important;
}

.card-carousel {
  position: relative;
  display: flex;
  /* Active state for the visible card */
  /* Arrow navigation */
  border: 1px solid #ddd;
  border-radius: 5px;
}

.card-carousel .card {
  border: none;
  box-shadow: var(--bs-box-shadow);
  background: #fff !important;
  display: inline-flex;
  position: absolute;
  overflow: hidden;
  transition: 0.4s all ease-in-out;
  opacity: 0;
  z-index: 10;
}

.card-carousel .card .card-body {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  background: #fff !important;
}

.card-carousel .card-carousel__nav {
  bottom: 0;
}

.card-carousel .card-carousel__nav .carousel__arrow {
  width: 25%;
}

.card-carousel .card .card-body .card-title,
.card-carousel .card .card-body .card-text,
.card-carousel .card .card-body a {
  transform: translateY(25%);
  opacity: 1;
  visibility: hidden;
  transition: 0.4s all ease-in-out;
}

.card-carousel .card .card-body .card-title {
  font-family: "Libertinus Keyboard", system-ui;
  font-size: 2rem;
  font-weight: 400;
  font-style: normal;
  color: #f06d56;
}

.card-carousel .card img.img-fluid {
  padding: 0.6666666667rem;
  object-fit: cover;
  transition: 0.4s all ease-in-out;
  transform: translateX(100%);
  width: 75%;
}

.card-carousel .card .card-body .card-text {
  font-size: 1rem;
  font-weight: 400;
}

@media (min-width: 768px) {
  .card-carousel .card img.img-fluid {
    object-fit: contain;
  }
}

.card-carousel .active {
  position: relative;
  opacity: 1;
  z-index: 11;
}

.card-carousel .active img.img-fluid {
  transform: translateX(0);
}

.card-carousel .active .card-body .card-title,
.card-carousel .active .card-body .card-text,
.card-carousel .active .card-body a {
  transform: translateY(0);
  opacity: 1;
  transition: 0.4s all ease-in-out;
  visibility: visible;
}

.card-carousel .card-carousel__nav {
  position: absolute;
  display: flex;
  justify-content: center;
  z-index: 12;
}

.card-carousel .card-carousel__nav .carousel__arrow {
  display: flex;
  justify-content: center;
  position: relative;
  cursor: pointer;
  padding: 0.5rem 1rem;
  fill: #fff;
  background-color: #f06d56;
}

.card-carousel .card-carousel__nav .carousel__arrow:hover {
  background-color: var(--bs-link-hover-color);
}

.card-carousel .card-carousel__nav .carousel__arrow:last-child {
  margin-left: 1px;
}

/*----- list-1 -----*/

.img-circle {
	width: 100%;
	border-radius: 50%;
}

figure {
    margin: 0 0 25px 0 !important;
}

img.img-circle {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

img.img-circle:hover {
    opacity: 1;
    filter: alpha(opacity=100);
}

.line-1 {
	position: relative;
	width: 100%;
	height: 2px;
	margin: 5px 0 5px;
	background: url('img/line-1.png') right top no-repeat;
}

.magnify-it {
	position: relative;
	text-align: center;
	padding: 10px 0 10px;
	margin-top: -35px;
}

.text-65 {
  font-size: 65% !important;
  text-transform: lowercase !important;
}

/*----- list 3 -----*/

.list-3 {
	margin: 30px 0 0;
	padding: 0;
	position: relative;
	list-style: none;
	overflow: hidden;
}

.list-3 li {
	position: relative;
	margin: 0 0 15px;
	padding: 0;
}

.list-3 li a {
	color: #333;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.list-3 li a:hover {
	text-decoration: none;
	color: #f06d56;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.img-icon {
	width: 75px;
	z-index: 11 !important;
}

.img-icon-social {
	width: 50px;
}

.img-icon-big {
	width: 60px;
}

.img-icon-medium {
	width: 50px;
}

.img-icon-small {
	width: 30px;
}

.img-icon-xs {
	width: 15px;
}


/*----- box 3 -----*/

.box-3 {
	position: relative;
}

.badgecolor-1 {
	background: #f06d56;
}

.badgecolor-2 {
	background: #fa9c2e;
}

.badgecolor-3 {
	background: #ff8559;
}

/* news cards scroll -- https://codepen.io/chriscoyier/pen/NWMQQoL */

.news-container {
  height: 650px;
  overflow-y: auto;
  padding: 1.5rem;
}

.card-news {
  position: sticky;
  top: 0;
  background: white;
  padding: 1rem;
  box-shadow: 0 -0.25rem 0.25rem rgba(0 0 0 / 0.15);
  border-radius: 5px;
}

.card-news h5 {
  color: #f06d56;
}

.card-news p.newsline {
  font-size: 1rem;
  line-height: 1.5;
  color: #444;
}

.circle-news-date {
	font: "Elms Sans", sans-serif;
	text-align: center;
	float: left;
	width: 75px;
	padding: 18px 0 18px;
	margin-right: 20px;
	white-space: normal;
	border: none;
	border-radius: 500px;
	font-size: 1.25rem;
}

.card-news:nth-child(1) {
  top: 1rem;
}

.card-news:nth-child(2) {
  top: 2rem;
}

.card-news:nth-child(3) {
  top: 3rem;
}

.card-news:nth-child(4) {
  top: 4rem;
}

.card-news:nth-child(5) {
  top: 5rem;
}

.card-news:nth-child(6) {
  top: 6rem;
}

.card-news:nth-child(7) {
  top: 7rem;
}

.card-news:nth-child(8) {
  top: 8rem;
}

.card-news:nth-child(9) {
  top: 9rem;
}

.card-news:nth-child(10) {
  top: 10rem;
}

/* headline news */

.headline-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 10px;
  border: 1px dashed black;
  border-radius: 10px;
}

.headline-name {
  position: relative;
  margin: 0 auto;

  background: url('img/carte-ardennes-black.png') center top no-repeat;
  width: 100%;
  height: 75px;
  
  text-align: center;

  font-size: 3rem;
  font-weight: 600;
  opacity: 0.5;
  color: #666 !important;
}

.classic-headline {
  max-width: 800px;
  margin: 20px auto 0;
  text-align: center;
  border-top: 3px double #111;
  padding: 20px 0 0;
}

.headline-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: #666;
  margin-top: -10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.classic-headline h2 {
  font-size: 1.75rem;
  font-weight: 600;
  color: #111;
  margin: 25px 0 10px 0;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.classic-headline p.subheadline {
  font-size: 1rem;
  color: #444;
  font-style: italic;
  line-height: 1.5;
  margin: 20px auto 0;
  text-align: justify;
}

.circle-news-date-badge {
	position: absolute;
	color: #fff;
	background: #aad989;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	
	border-radius: 500px;
	padding: 25px 0 25px;
	
	width: 90px;
	
	bottom: -30px;
	right: 25px;
}

.image-opacity {
   opacity: 1;
   transition: opacity 0.3s;
}

.image-opacity:hover {
   opacity: 0.6;
}

.container-image-zoom {
   border: 1px solid #ddd;
   position: relative;
   margin-top: 0 !important;
}

.image-zoom-tag {
   float: left;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 100;
   background-color: #444;
   padding: 5px;
   color: #fff;
   font-size: 0.85rem;
}

/*----- lien wave -- https://codepen.io/daviddarnes/pen/OgaRYw -----*/
/*
a.link-wave {
  text-decoration: none;
  position: relative;
  padding-bottom: 1em;
  overflow: hidden;
  color: #fff;
  z-index: 11;
}

a.link-wave:after {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  content: attr(data-title) attr(data-title);
  color: transparent;
  line-height: 1.8;
  text-decoration: underline;
  -webkit-text-decoration-style: wavy;
          text-decoration-style: wavy;
  -webkit-text-decoration-color: #ffc823;
          text-decoration-color: #ffc823;
}

a.link-wave:hover:after {
  -webkit-animation: wavy-slide 3s linear infinite;
          animation: wavy-slide 3s linear infinite;
}

@-webkit-keyframes wavy-slide {
  to {
    margin-left: 75%;
  }
}

@keyframes wavy-slide {
  to {
    margin-left: 75%;
  }
}
*/
/* link Nat Geo style -- https://codepen.io/shelaine/pen/zJWMNQ */

a.link-tls, a.link-tls:link {
  color: #444;
  text-decoration: none;
  background-position-y: -0%;
  background-image: linear-gradient(transparent 50%, gold 50%);
  transition: background 500ms ease;
  background-size: 2px;
  background-size: auto 175%;
}

a.link-tls:hover {
  background-position-y: 100%;
  color: #444 !important;
  padding: 2px 5px;
}

/*--- TLS - restaurants -- https://codepen.io/colebemis/pen/WNKdNj ---*/

.tls-cards-container {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr 1fr;
  margin: 0;
  padding: 0;
  -o-box-pack: center;
  justify-content: center;
  -o-box-align: center;
  align-items: center;
}

@media only screen and (max-width: 991px) {
.tls-cards-container {
  grid-template-columns: 1fr;
}
}

.card-tls-container {
  width: 33%;
  min-width: 500px;
  height: 450px;
  position: relative;
  -ms-perspective: 800px;
  perspective: 800px;
  border-radius: 5px;
  padding: 25px 0 0 50px;
}

.card-tls {
  width: 33%;
  min-width: 500px;
  height: 400px !important;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.card-tls .front, .card-tls .back {
  position: absolute;
  width: 33%;
  min-width: 500px;
  height: 400px !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 5px;
  background: #fff;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -o-box-pack: center;
  justify-content: center;
  -o-box-align: center;
  align-items: center;
  -webkit-font-smoothing: antialiased;
  color: #47525d;
}

.card-tls .back {
  transform: rotateY(180deg);
}

.card-tls.flipped {
  transform: rotateY(180deg);
}

.card-header-tls {
  background-color: #aad989;
  border-color: #aad989;
  border-bottom: none;
  color: #f6e9dc;
  font-size: 1.25rem;
  vertical-align: bottom;
  display: flex;
}

.card-body-tls {
  background-color: #fff;
}

.card-text-tls {
  background-color: #fff;
}

.card-title-tls {
  padding: 20px 0 0 50px;
}

.light-green {
  background-color: #ebf7ef;
}

.opening-hours {
  display: flex;
}

/* table ouverture restaurants */

table.tbl-opening-hours {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 80%;
  table-layout: fixed;
  margin-left: 20px;
}

table.tbl-opening-hours tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .15rem;
}

table.tbl-opening-hours th,
table.tbl-opening-hours td {
  padding: .25rem;
  text-align: center;
  font-size: .75rem;
}

/*--- responsive ---*/

@media screen and (max-width: 600px) {
  table.tbl-opening-hours {
    border: 0;
  }

  table.tbl-opening-hours caption {
    font-size: 1.3rem;
  }
  
  table.tbl-opening-hours thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table.tbl-opening-hours tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625rem;
  }
  
  table.tbl-opening-hours td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8rem;
    text-align: right;
  }
  
  table.tbl-opening-hours td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table.tbl-opening-hours td:last-child {
    border-bottom: 0;
  }
}

.text-muted {
  color: #444;
  text-decoration: none;
  border-bottom: 0.05rem black dashed;
  font-style: italic;
}

.text-muted:hover {
  border-color: red !important;
}

/* -- http://codepen.io/adipurdila/pen/MWpELyG 

a.link-tls {
  text-decoration: none;
  color: #444;
  vertical-align: middle;
  position: relative;
}

a.link-tls::before {
  content: "";
  background-color: gold;
  position: absolute;
  left: 0.5rem;
  bottom: 5px;
  width: 100%;
  height: 8px;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

a.link-tls:hover::before {
  left: -5px;
  bottom: 0;
  height: 100%;
  width: calc(100% + 10px);
}

*/
/*----- fancy rounded link -- https://codepen.io/dnlzrgz/pen/pogrRqz -----*/

.link-rounded-container {
	align-items: center;
	display: grid;
	height: 100%;
	justify-content: left;
	padding: 25px 0 0 15%;
}

.link-rounded {
	color: #1a0f13;
	display: block;
	font-size: 1.1rem;
	line-height: 0;
	outline: none;
	padding: 1.25rem;
	position: relative;
	text-decoration: none;
	transition: color 250ms ease;
}

.link-rounded::before {
	background-color: #c7166f;
	border-radius: 100%;
	content: "";
	display: block;
	
	width: 2.5rem;
	height: 2.5rem;
	
	top: -1px;
	left: -1px;
	
	opacity: 0.5;
	padding: 0.75rem;
	position: absolute;

	transition: all 250ms ease;
}

.link-rounded:hover:before {
	border-radius: 4px;
	opacity: 0.9;
	width: 100%;
}

.link-rounded:hover {
	color: #f2f1f4;
}

.link-rounded-text {
	position: relative;
	top: -10px;
}

/*----- liste TLS chateaux -- https://codepen.io/michellebarker/pen/poLoeRq -----*/

/* other cards -> castles

 https://codepen.io/brucebrotherton/pen/wvqjORe 

 https://codepen.io/rabakilgur/pen/RYpVQz 
 
 https://codepen.io/3psy0n/pen/LYpajmX 
 
 https://codepen.io/Chadrine-Azimendem/pen/qBPWeVL 
 
*/

.projcard-container {
	margin: 10px 0;
}

/* actual code */
.projcard-container,
.projcard-container * {
	box-sizing: border-box;
}

.projcard-container {
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
}

.projcard {
	position: relative;
	width: 100%;
	height: 300px;
	margin-bottom: 40px;
	border-radius: 10px;
	background-color: #fff;
	border: 2px solid #ddd;
	font-size: 1rem;
	overflow: hidden;
	cursor: pointer;
	box-shadow: 0 4px 21px -12px rgba(0, 0, 0, .66);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.projcard:hover {
	box-shadow: 0 34px 32px -33px rgba(0, 0, 0, .18);
	transform: translate(0px, -3px);
}

.projcard::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(-70deg, #424242, transparent 50%);
	opacity: 0.07;
}

.projcard:nth-child(2n)::before {
	background-image: linear-gradient(-250deg, #424242, transparent 50%);
}

.projcard-innerbox {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.projcard-img {
	position: absolute;
	height: 300px;
	width: 400px;
	top: 0;
	left: 0;
	transition: transform 0.2s ease;
}

.projcard:nth-child(2n) .projcard-img {
	left: initial;
	right: 0;
}

.projcard:hover .projcard-img {
	transform: scale(1.05) rotate(1deg);
}

.projcard:hover .projcard-bar {
	width: 70px;
}

.projcard-textbox {
	position: absolute;
	top: 7%;
	bottom: 7%;
	left: 430px;
	width: calc(100% - 470px);
	font-size: 1rem;
}

.projcard:nth-child(2n) .projcard-textbox {
	left: initial;
	right: 430px;
}

.projcard-textbox::before,
.projcard-textbox::after {
	content: "";
	position: absolute;
	display: block;
	background: #ff0000bb;
	background: #fff;
	top: -20%;
	left: -55px;
	height: 140%;
	width: 60px;
	transform: rotate(8deg);
}

.projcard:nth-child(2n) .projcard-textbox::before {
	display: none;
}

.projcard-textbox::after {
	display: none;
	left: initial;
	right: -55px;
}

.projcard:nth-child(2n) .projcard-textbox::after {
	display: block;
}

.projcard-textbox * {
	position: relative;
}

.projcard-title {
	font-family: "Dongle", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
	margin-top: -15px;
}

.projcard-subtitle {
	font-family: "Dongle", sans-serif;
	font-size: 1.75rem;
	color: #888;
	margin-top: -25px;
}

.projcard-bar {
	left: -2px;
	width: 50px;
	height: 5px;
	margin: 10px 0;
	border-radius: 5px;
	background-color: #424242;
	transition: width 0.2s ease;
}

.projcard-blue .projcard-bar { background-color: #0088FF; }
.projcard-blue::before { background-image: linear-gradient(-70deg, #0088FF, transparent 50%); }
.projcard-blue:nth-child(2n)::before { background-image: linear-gradient(-250deg, #0088FF, transparent 50%); }
.projcard-red .projcard-bar { background-color: #D62F1F; }
.projcard-red::before { background-image: linear-gradient(-70deg, #D62F1F, transparent 50%); }
.projcard-red:nth-child(2n)::before { background-image: linear-gradient(-250deg, #D62F1F, transparent 50%); }
.projcard-green .projcard-bar { background-color: #40BD00; }
.projcard-green::before { background-image: linear-gradient(-70deg, #40BD00, transparent 50%); }
.projcard-green:nth-child(2n)::before { background-image: linear-gradient(-250deg, #40BD00, transparent 50%); }
.projcard-yellow .projcard-bar { background-color: #F5AF41; }
.projcard-yellow::before { background-image: linear-gradient(-70deg, #F5AF41, transparent 50%); }
.projcard-yellow:nth-child(2n)::before { background-image: linear-gradient(-250deg, #F5AF41, transparent 50%); }
.projcard-orange .projcard-bar { background-color: #FF5722; }
.projcard-orange::before { background-image: linear-gradient(-70deg, #FF5722, transparent 50%); }
.projcard-orange:nth-child(2n)::before { background-image: linear-gradient(-250deg, #FF5722, transparent 50%); }
.projcard-brown .projcard-bar { background-color: #C49863; }
.projcard-brown::before { background-image: linear-gradient(-70deg, #C49863, transparent 50%); }
.projcard-brown:nth-child(2n)::before { background-image: linear-gradient(-250deg, #C49863, transparent 50%); }
.projcard-grey .projcard-bar { background-color: #424242; }
.projcard-grey::before { background-image: linear-gradient(-70deg, #424242, transparent 50%); }
.projcard-grey:nth-child(2n)::before { background-image: linear-gradient(-250deg, #424242, transparent 50%); }
.projcard-customcolor .projcard-bar { background-color: var(--projcard-color); }
.projcard-customcolor::before { background-image: linear-gradient(-70deg, var(--projcard-color), transparent 50%); }
.projcard-customcolor:nth-child(2n)::before { background-image: linear-gradient(-250deg, var(--projcard-color), transparent 50%); }

.projcard-description {
	z-index: 10;
	font-size: 0.95rem;
	color: #424242;
	height: 125px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* image zoom castles */

.container-image-zoom-left {
   border: 1px solid #ddd;
   position: relative;
}

.image-zoom-tag-left {
   float: left;
   position: absolute;
   left: 0px;
   top: 0px;
   z-index: 10;
   background-color: #444;
   padding: 5px;
   color: #fff;
   font-size: 0.85rem;
}

.container-image-zoom-right {
   border: 1px solid #ddd;
   position: relative;
}

.image-zoom-tag-right {
   float: right;
   position: absolute;
   right: 0px;
   top: 0px;
   z-index: 10;
   background-color: #444;
   padding: 5px;
   color: #fff;
   font-size: 0.85rem;
}

/*---balades à pied / vélo ---*/

.card-balades-pied {
  background-color: transparent !important;
  border: none;
}

.card-services {
  background-color: transparent !important;
  border: none;
  max-width: 400px;
}

.card-services-body {
  background-color: transparent !important;
}

.card-services-body .img-icon {
  color: #f3b93e;
  margin: 0 auto;
}

.underline-services {
  position: relative;
}

.underline-services:after {
  position: absolute;
  content: "";
  height: 2px;
  bottom: 1px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 40%;
  background: #444;
}

.card-services-title {
	font-family: "Dongle", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
	margin-top: px;
}

.card-services-text {
  color: #444;
  text-align: left;
}

.bg-balade-pied-1 {
  position: relative;
  margin: 0 auto;

  background: url('img/bg-balade-pied-1.png') left bottom no-repeat;
  width: 100%;
  height: 100%;
}

.bg-balade-velo-1 {
  position: relative;
  margin: 0 auto;

  background: url('img/bg-balade-velo-1.png') left bottom no-repeat;
  width: 100%;
  height: 100%;
}

/*-------history events timeline-------*/
/*-- https://codepen.io/hermesgrau/pen/NWoqNae --*/

.event-date {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  --color-font: #000;
  --color-bg: #fff;
}

.section-title {
  position: sticky;
  top: 20px;
}

.section-content {
  display: flex;
  flex-direction: column;
}

.event-date article {
  display: flex;
  gap: 30px;
  width: 100%;
  max-width: 50rem;
}

.event-date aside {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.section-content main {
  padding-bottom: 2rem;
}

.event-date .dot {
  --size: .5rem;
  width: var(--size);
  height: var(--size);
  margin: calc((1rem - var(--size))/2);
  border-radius: 50%;
  background-color: var(--color-font);
  flex-grow: 0;
}

.event-date .line {
  flex-grow: 1;
  margin: 8px 0;
  width: 3px;
  background-color: var(--color-font);
}

.border-start {
    --bs-border-style: dashed;
	border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.border-end {
    --bs-border-style: dashed;
	border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

/*----- maps -----*/

.maps-container {
  display: flex;
  width: 100%;
  height: 100%;
  color: #000;
  font-size: 1rem;
}

.maps-left-col {
  width: 60%;
}

.maps-right-col {
  width: 40%;
  padding: 0.5rem 1rem;
}

.maps-container h6 {
  font: "Allura", Georgia, serif;
  color: #000;
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 0.25rem;
  padding: 0 0 2rem 0;
}

/*----- contact form -----*/

.contact-container h4 {
  color: #000;
  letter-spacing: 0.25rem;
}

.contact-container p {
  font-size: 1.25rem !important;
}

.contact-us {
  margin-top: 50px;
  background: #f8f4e5;
  padding: 25px 30px 25px 30px;
  border-top: 10px solid #f45702;
  display: block !important;
}

.contact-us form {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  display: block !important;
}

.contact-us label, .contact-us input, .contact-us textarea {
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 2rem;
}

.contact-us em {
  color: #f45702;
  font-weight: bold;
}

.contact-us input, .contact-us textarea {
  margin-bottom: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  background: #f8f4e5;
  padding: 2px;
  outline: none;
}


.contact-us input:focus, .contact-us textarea:focus {
  border: 1px solid #f45702;
}

.contact-us textarea {
  resize: none;
}

.contact-us #name {
  	background-image: url('img/icons/icon-person-1.png');
	background-size: 40px 40px;
	background-position: top left; /*-5px 10px 10px 35px !important;*/
	background-repeat: no-repeat;
	padding: 5px 5px 5px 50px !important;
}

.contact-us #email {
  	background-image: url('img/icons/icon-email-1.png');
	background-size: 40px 40px;
	background-position: 0px 10px 10px 35px !important;
	background-repeat: no-repeat;
	padding: 5px 5px 5px 50px !important;
}

.contact-us [type=submit] {
  display: block;
  float: right;
  line-height: 24pt;
  margin-top: 10px;
  padding: 0 20px;
  border: none;
  background: #f45702;
  color: white;
  letter-spacing: 2px;
  transition: 0.2s all ease-in-out;
  border-bottom: 2px solid transparent;
  outline: none;
}

.contact-us [type=submit]:hover {
  background: inherit;
  color: #f45702;
  border-bottom: 2px solid #f45702;
}

.contact-us ::selection {
  background: #ffc7b8;
}

input,
input:hover,
input:focus,
textarea:,
textarea:hover,
textarea:focus {
  border: 1px solid #f45702;
  -webkit-text-fill-color: #2A293E;
  -webkit-box-shadow: 0 0 0px 1000px #f8f4e5 inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* prompt messages */

#promptMessages {
  position: fixed;
  top: 25px;
  right: 25px;
  width: 30%;
  z-index: 10000000;
}

.alert {
  position: relative;
}

.alert .close {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 1em;
}

.alert .fa-solid {
  margin-right: 1em;
}

/* alert messages modal a.k.a toast */
.toast-alert {
  /*position: absolute;*/
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 10000001;
  border-radius: 15px;
  border: 1px solid #999;
  background: #eee;
  padding: 20px 35px 20px 25px;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateX(calc(100% + 25px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
  
  display: none;
}

.toast-alert.active {
  display: block;
  transform: translateX(0%);
}

.toast-alert .toast-alert-content {
  display: flex;
  align-items: center;
}

.toast-alert-content .check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 35px;
  background-color: rgb(99, 164, 152);
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.toast-alert-content .error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-width: 35px;
  background-color: rgb(192, 0, 0);
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
}

.toast-alert-content .message {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}

.message .text {
  font-size: 1rem;
  font-weight: 400;
  color: #666;
}

.message .text.text-1 {
  font-weight: 600;
  color: #333;
}

.toast-alert .close-toast-success, .toast-alert .close-toast-error {
  position: absolute;
  top: 10px;
  right: 15px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
}

.toast-alert .close-toast-success:hover, .toast-alert .close-toast-error:hover {
  opacity: 1;
}

.toast-alert .progress-success, .toast-alert .progress-error {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;

}

.toast-alert.toast-success .progress-success:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #aad989; /* success = light green */
}

.toast-alert.toast-error .progress-error:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #f60000; /* error = light red */
}

.progress-success.active:before, .progress-error.active:before {
  animation: progress 5s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}

/* Fix for Smaller Screens */

@media (max-height: 300px) {
	body {
		justify-content: flex-start;
	}
}

/* Adjust for Reduced Motion */

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		animation-duration: 0.001s !important;
	}
}

/*-- balades à vélo -- https://codepen.io/suriyag/pen/WmmBrN */

.balades-velo-liste {
    list-style: none;
    width: 95%;
    background: #fff;
    padding: 30px;
}

.balades-velo-liste li {
    padding: 10px 0 10px 0;
}

.balades-velo-liste li:nth-child(odd) {
    text-align: left;
	padding-left: 4px;
    border-left: 10px solid #198754;
    border-bottom: 10px solid #20c997;
}

.balades-velo-liste li:nth-child(even) {
    text-align:right;
    border-right: 10px solid #198754;
    padding-right: 4px;
    border-bottom: 10px solid #20c997;
}

/*----- plateformes booking -----*/

.card-header-booking {
  background-color: #e66053;
  border-color: #e66053;
  border-bottom: none;
  color: #f6e9dc;
  font-size: 1.15rem;
  text-align: center;
}

.card-body-booking {
  background-color: #fff;
}

.card-text-booking {
  background-color: #fff;
  height: 100%;
}

.blink-soft {
  color: red;
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* calendar = jQuery + Bootstrap + custom CSS -- https://codepen.io/Alahab2/pen/rLeyar */
/* calendar holder */

section.calendar {
  position: absolute;
  z-index: 1000;
  margin-top: 10px;
  padding: 0;
  right: 115px;
  min-width: 350px;
  height: auto;
  text-align: center;
}

.calendar-inner {
  position: relative;
  z-index: 1000;
  width: 310px;
  height: auto;
  background-color: #df7d7d;
  padding: 1rem 0 1rem 1rem;
  box-shadow: 5px 5px #d55454;
  border-radius: 10px;
  font-size: 0.95rem;
  text-align: center;
}

.calendar-inner.limited {
	max-height: 40px;	
	border-bottom: 1px solid #ccc;
}

section.calendar .circle {
  height: 20px;
  width: 20px;
  background-color: #b12c2c;
  border-radius: 50%;
  box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3);
  position: absolute;
}

section.calendar .circle.right-hole {
  right: 16px;
}

section.calendar .rope {
  height: 110px;
  width: 10px;
  background-color: #2e6a2e;
  position: absolute;
  border-radius: 0 0 7px 7px;
  top: -80px;
  box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.3);
}

section.calendar .rope.hole-left {
  left: 21px;
}

section.calendar .rope.hole-right {
  right: 21px !important;
}

a.cal-go-link {
	background-color: #444;
	background-image: url('img/icons/icon-up-and-down-1-white.png');
	background-repeat: no-repeat;
	background-position: 95% center;
	
	text-decoration: none;
	font-size: 1rem;
	color: #fff;
	
	position: relative;
	margin-top: 10px !important;
	padding: 12px 50px 12px 20px;

	border: 1px dashed #444;
	border-top: 0;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

/* calendar */

#datepicker {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 35px;
  margin-left: -8px;
  font-size: 0.95rem;
  padding: 0;
}

section.calendar .ui-datepicker {
  display: inline-block;
  margin: auto;
  background-color: #feeebd !important;
  padding: 5px !important;
}

section.calendar .ui-state-default {
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 0.95rem !important;
}

section.calendar .ui-datepicker-header {
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.75rem;
  padding: 0;
}

section.calendar .ui-datepicker .ui-datepicker-calendar {
  margin: 0 auto;
  width: 100%;
  padding: 1rem;
}

.ui-datepicker th {
    padding: .3em .1em;
    text-align: center;
    border: 0;
    font-weight: 400;
}

.ui-widget-content {
  background-color: #feeebd !important;
}
	
section.calendar .ui-datepicker .ui-datepicker-header .ui-datepicker-prev span {
    font-size: 2em !important;
}

section.calendar .ui-datepicker td {
  font-family: var(--bs-body-font-family);
  font-weight: 400 !important;
  font-size: 0.85rem !important;
}

.close-button-holder {
  margin: 0;
  padding: 0;
}

/*------- overwrite jQuery UI -------*/
/*------- calendar header -------*/

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 0px solid #d19405;
    color: #4c3000;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .1em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0.5em 2.3em 0.4em;
    line-height: 1em;
    text-align: center;
}

/*------- prev / next -------*/

.ui-datepicker-prev span,
.ui-datepicker-next span {
  background-image: none !important;
}

.ui-datepicker-prev:before,
.ui-datepicker-next:before {
  position: absolute;
  top: 15px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-datepicker-prev:before {
  content: url('img/icons/icon-double-left-1.png');
}

.ui-datepicker-next:before {
  content: url('img/icons/icon-double-right-1.png');
}

/* calendar up/down button */

button.cal-button-up {
	background-color: #444;
	background-image: url('img/icons/icon-up-and-down-1-white.png');
	background-repeat: no-repeat;
	background-position: 95% center;
	
	text-decoration: none;
	font-size: 1rem;
	color: #fff;
	
	position: relative;
	margin-top: 5px !important;
	padding: 12px 50px 12px 20px;

	border: 1px dashed #444;
	border-top: 0;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

button.cal-button-down {
	background-color: #fff;
	background-image: url('img/icons/icon-up-and-down-1.png');
	background-repeat: no-repeat;
	background-position: 95% center;
	
	text-decoration: none;
	font-size: 1rem;
	color: #444;
	
	position: relative;
	margin-top: 5px !important;
	padding: 12px 50px 12px 20px;

	border: 1px dashed #444;
	border-top: 0;

	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	-o-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
}

/*
.calendar-arrow-up {

	background-image: url('img/icons/icon-arrow-up-2.png');
	background-repeat: no-repeat;
	background-position: 95% center;
}

.calendar-arrow-down {

	background-image: url('img/icons/icon-arrow-down-2.png');
	background-repeat: no-repeat;
	background-position: 95% center;
	
	margin-top: -25px !important;
}
*/
.close-button-holder-move-up {
	margin-top: -25px !important;
}

/*----- calendar -- https://codepen.io/DanielCouper/pen/eNveXy -----*/
/*
.calendar-wrapper {
  background-color: #f6e9dc;
  max-width: 300px;
}

table {
    caption-side: top;
    border-collapse: collapse;
	margin: 10px 0;
}

.calendar {
  table-display: fixed !important;
  border: 1px solid #a54918;
  width: 100%;
  max-width: 300px;
}

.calendar__day__header,
.calendar__day__cell {
  border: 1px solid #a54918; 
  text-align: center;
  width: calc(100% / 7);
  vertical-align: middle;
}

.calendar__day__header:first-child,
.calendar__day__cell:first-child {
  border-left: none;
}

.calendar__day__header:last-child,
.calendar__day__cell:last-child {
  border-right: none;
}

.calendar__day__header,
.calendar__day__cell {
  /*padding: 0.1rem 0 .1rem;*/
/*}*/
/*
.calendar__banner--month {
  border: 1px solid #e66053;
  border-bottom: none;
  text-align: center;
  padding: 0.25rem;
}

.calendar__banner--month h3 {
  background-color: #e66053;
  color: #f6e9dc;
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.1em;
  padding: 0.25rem 1rem;
  text-transform: uppercase;
}

.calendar__day__header {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calendar__day__cell {
  font-size: 0.8rem;
  font-weight: bold;
  position: relative;
}

tr:nth-child(odd) > .calendar__day__cell:nth-child(odd) {
  color: #e66053;
}

tr:nth-child(even) > .calendar__day__cell:nth-child(even) {
  color: #e66053;
}

.calendar__day__cell[data-empty] {
  background-color: #ecd5be;
}

.calendar__day__cell[data-bank-holiday] {
  background-color: #e66053;
  border-color: #e66053;
  border-bottom: none;
  color: #f6e9dc;
}

.calendar__day__cell[data-bank-holiday]:after {
  content: attr(data-bank-holiday);
  color: #f6e9dc;
  display: block;
  font-size: 0.6rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1rem;
}
*/
/************* content end **************/
/************** footer **************/

.footer {
	padding: 25px 0;
	color: #8d7d75;
}

/************** footer end **************/
