@charset "UTF-8";
/* Fond plein */
.bg-bleu {
  background-color: #7AB0CF;
}

/* btn plein */
.btn-bleu {
  background-color: #7AB0CF;
  color: #fff;
}

.text-bleu {
  color: rgb(58.4565745856, 124.2202209945, 161.9734254144);
}

.section-bleu h3 {
  color: rgb(58.4565745856, 124.2202209945, 161.9734254144);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-bleu {
  color: #fff;
  background-color: rgb(221.75, 235.25, 243);
  transition: background-color ease-in-out 0.5s;
}
.section-bleu:hover {
  background-color: rgb(187.5998618785, 214.9653314917, 230.6751381215);
}

.bg-bleu.bg-opacity-10 {
  background-color: rgba(122, 176, 207, 0.1);
  color: #fff;
}

.btn-bleu.btn-opacity-10 {
  background-color: rgba(122, 176, 207, 0.1);
  color: #fff;
}

.bg-bleu.bg-opacity-25 {
  background-color: rgba(122, 176, 207, 0.25);
  color: #fff;
}

.btn-bleu.btn-opacity-25 {
  background-color: rgba(122, 176, 207, 0.25);
  color: #fff;
}

.bg-bleu.bg-opacity-50 {
  background-color: rgba(122, 176, 207, 0.5);
  color: #fff;
}

.btn-bleu.btn-opacity-50 {
  background-color: rgba(122, 176, 207, 0.5);
  color: #fff;
}

.bg-bleu.bg-opacity-75 {
  background-color: rgba(122, 176, 207, 0.75);
  color: #fff;
}

.btn-bleu.btn-opacity-75 {
  background-color: rgba(122, 176, 207, 0.75);
  color: #fff;
}

/* Couleur de texte */
.text-bleu {
  color: #7AB0CF;
}

/* Fond plein */
.bg-marine {
  background-color: #425474;
}

/* btn plein */
.btn-marine {
  background-color: #425474;
  color: #fff;
}

.text-marine {
  color: rgb(44.22, 56.28, 77.72);
}

.section-marine h3 {
  color: rgb(44.22, 56.28, 77.72);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-marine {
  color: #fff;
  background-color: rgb(202.7362637363, 210.8461538462, 225.2637362637);
  transition: background-color ease-in-out 0.5s;
}
.section-marine:hover {
  background-color: rgb(175.4571428571, 187.8, 209.7428571429);
}

.bg-marine.bg-opacity-10 {
  background-color: rgba(66, 84, 116, 0.1);
  color: #fff;
}

.btn-marine.btn-opacity-10 {
  background-color: rgba(66, 84, 116, 0.1);
  color: #fff;
}

.bg-marine.bg-opacity-25 {
  background-color: rgba(66, 84, 116, 0.25);
  color: #fff;
}

.btn-marine.btn-opacity-25 {
  background-color: rgba(66, 84, 116, 0.25);
  color: #fff;
}

.bg-marine.bg-opacity-50 {
  background-color: rgba(66, 84, 116, 0.5);
  color: #fff;
}

.btn-marine.btn-opacity-50 {
  background-color: rgba(66, 84, 116, 0.5);
  color: #fff;
}

.bg-marine.bg-opacity-75 {
  background-color: rgba(66, 84, 116, 0.75);
  color: #fff;
}

.btn-marine.btn-opacity-75 {
  background-color: rgba(66, 84, 116, 0.75);
  color: #fff;
}

/* Couleur de texte */
.text-marine {
  color: #425474;
}

/* Fond plein */
.bg-violet {
  background-color: #425474;
}

/* btn plein */
.btn-violet {
  background-color: #425474;
  color: #fff;
}

.text-violet {
  color: rgb(44.22, 56.28, 77.72);
}

.section-violet h3 {
  color: rgb(44.22, 56.28, 77.72);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-violet {
  color: #fff;
  background-color: rgb(202.7362637363, 210.8461538462, 225.2637362637);
  transition: background-color ease-in-out 0.5s;
}
.section-violet:hover {
  background-color: rgb(175.4571428571, 187.8, 209.7428571429);
}

.bg-violet.bg-opacity-10 {
  background-color: rgba(66, 84, 116, 0.1);
  color: #fff;
}

.btn-violet.btn-opacity-10 {
  background-color: rgba(66, 84, 116, 0.1);
  color: #fff;
}

.bg-violet.bg-opacity-25 {
  background-color: rgba(66, 84, 116, 0.25);
  color: #fff;
}

.btn-violet.btn-opacity-25 {
  background-color: rgba(66, 84, 116, 0.25);
  color: #fff;
}

.bg-violet.bg-opacity-50 {
  background-color: rgba(66, 84, 116, 0.5);
  color: #fff;
}

.btn-violet.btn-opacity-50 {
  background-color: rgba(66, 84, 116, 0.5);
  color: #fff;
}

.bg-violet.bg-opacity-75 {
  background-color: rgba(66, 84, 116, 0.75);
  color: #fff;
}

.btn-violet.btn-opacity-75 {
  background-color: rgba(66, 84, 116, 0.75);
  color: #fff;
}

/* Couleur de texte */
.text-violet {
  color: #425474;
}

/* Fond plein */
.bg-vert {
  background-color: #3F783F;
}

/* btn plein */
.btn-vert {
  background-color: #3F783F;
  color: #fff;
}

.text-vert {
  color: rgb(42.21, 80.4, 42.21);
}

.section-vert h3 {
  color: rgb(42.21, 80.4, 42.21);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-vert {
  color: #fff;
  background-color: rgb(201.393442623, 226.856557377, 201.393442623);
  transition: background-color ease-in-out 0.5s;
}
.section-vert:hover {
  background-color: rgb(173.3114754098, 212.1135245902, 173.3114754098);
}

.bg-vert.bg-opacity-10 {
  background-color: rgba(63, 120, 63, 0.1);
  color: #fff;
}

.btn-vert.btn-opacity-10 {
  background-color: rgba(63, 120, 63, 0.1);
  color: #fff;
}

.bg-vert.bg-opacity-25 {
  background-color: rgba(63, 120, 63, 0.25);
  color: #fff;
}

.btn-vert.btn-opacity-25 {
  background-color: rgba(63, 120, 63, 0.25);
  color: #fff;
}

.bg-vert.bg-opacity-50 {
  background-color: rgba(63, 120, 63, 0.5);
  color: #fff;
}

.btn-vert.btn-opacity-50 {
  background-color: rgba(63, 120, 63, 0.5);
  color: #fff;
}

.bg-vert.bg-opacity-75 {
  background-color: rgba(63, 120, 63, 0.75);
  color: #fff;
}

.btn-vert.btn-opacity-75 {
  background-color: rgba(63, 120, 63, 0.75);
  color: #fff;
}

/* Couleur de texte */
.text-vert {
  color: #3F783F;
}

/* Fond plein */
.bg-vert-clair {
  background-color: #A3C48B;
}

/* btn plein */
.btn-vert-clair {
  background-color: #A3C48B;
  color: #000;
}

.text-vert-clair {
  color: rgb(106.4534285714, 148.7782857143, 75.6717142857);
}

.section-vert-clair h3 {
  color: rgb(106.4534285714, 148.7782857143, 75.6717142857);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-vert-clair {
  color: #000;
  background-color: rgb(232, 240.25, 226);
  transition: background-color ease-in-out 0.5s;
}
.section-vert-clair:hover {
  background-color: rgb(207.4885714286, 224.5307142857, 195.0942857143);
}

.bg-vert-clair.bg-opacity-10 {
  background-color: rgba(163, 196, 139, 0.1);
  color: #000;
}

.btn-vert-clair.btn-opacity-10 {
  background-color: rgba(163, 196, 139, 0.1);
  color: #000;
}

.bg-vert-clair.bg-opacity-25 {
  background-color: rgba(163, 196, 139, 0.25);
  color: #000;
}

.btn-vert-clair.btn-opacity-25 {
  background-color: rgba(163, 196, 139, 0.25);
  color: #000;
}

.bg-vert-clair.bg-opacity-50 {
  background-color: rgba(163, 196, 139, 0.5);
  color: #000;
}

.btn-vert-clair.btn-opacity-50 {
  background-color: rgba(163, 196, 139, 0.5);
  color: #000;
}

.bg-vert-clair.bg-opacity-75 {
  background-color: rgba(163, 196, 139, 0.75);
  color: #000;
}

.btn-vert-clair.btn-opacity-75 {
  background-color: rgba(163, 196, 139, 0.75);
  color: #000;
}

/* Couleur de texte */
.text-vert-clair {
  color: #A3C48B;
}

/* Fond plein */
.bg-orange {
  background-color: #D88B3A;
}

/* btn plein */
.btn-orange {
  background-color: #D88B3A;
  color: #fff;
}

.text-orange {
  color: rgb(153.2426271186, 93.3457627119, 30.3373728814);
}

.section-orange h3 {
  color: rgb(153.2426271186, 93.3457627119, 30.3373728814);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-orange {
  color: #fff;
  background-color: rgb(245.25, 226, 205.75);
  transition: background-color ease-in-out 0.5s;
}
.section-orange:hover {
  background-color: rgb(237.7970338983, 203.8322033898, 168.1029661017);
}

.bg-orange.bg-opacity-10 {
  background-color: rgba(216, 139, 58, 0.1);
  color: #fff;
}

.btn-orange.btn-opacity-10 {
  background-color: rgba(216, 139, 58, 0.1);
  color: #fff;
}

.bg-orange.bg-opacity-25 {
  background-color: rgba(216, 139, 58, 0.25);
  color: #fff;
}

.btn-orange.btn-opacity-25 {
  background-color: rgba(216, 139, 58, 0.25);
  color: #fff;
}

.bg-orange.bg-opacity-50 {
  background-color: rgba(216, 139, 58, 0.5);
  color: #fff;
}

.btn-orange.btn-opacity-50 {
  background-color: rgba(216, 139, 58, 0.5);
  color: #fff;
}

.bg-orange.bg-opacity-75 {
  background-color: rgba(216, 139, 58, 0.75);
  color: #fff;
}

.btn-orange.btn-opacity-75 {
  background-color: rgba(216, 139, 58, 0.75);
  color: #fff;
}

/* Couleur de texte */
.text-orange {
  color: #D88B3A;
}

/* Fond plein */
.bg-gold {
  background-color: #D6B065;
}

/* btn plein */
.btn-gold {
  background-color: #D6B065;
  color: #fff;
}

.text-gold {
  color: rgb(166.6753846154, 125.5476923077, 44.3746153846);
}

.section-gold h3 {
  color: rgb(166.6753846154, 125.5476923077, 44.3746153846);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-gold {
  color: #fff;
  background-color: rgb(244.75, 235.25, 216.5);
  transition: background-color ease-in-out 0.5s;
}
.section-gold:hover {
  background-color: rgb(235.0519230769, 216.5634615385, 180.0730769231);
}

.bg-gold.bg-opacity-10 {
  background-color: rgba(214, 176, 101, 0.1);
  color: #fff;
}

.btn-gold.btn-opacity-10 {
  background-color: rgba(214, 176, 101, 0.1);
  color: #fff;
}

.bg-gold.bg-opacity-25 {
  background-color: rgba(214, 176, 101, 0.25);
  color: #fff;
}

.btn-gold.btn-opacity-25 {
  background-color: rgba(214, 176, 101, 0.25);
  color: #fff;
}

.bg-gold.bg-opacity-50 {
  background-color: rgba(214, 176, 101, 0.5);
  color: #fff;
}

.btn-gold.btn-opacity-50 {
  background-color: rgba(214, 176, 101, 0.5);
  color: #fff;
}

.bg-gold.bg-opacity-75 {
  background-color: rgba(214, 176, 101, 0.75);
  color: #fff;
}

.btn-gold.btn-opacity-75 {
  background-color: rgba(214, 176, 101, 0.75);
  color: #fff;
}

/* Couleur de texte */
.text-gold {
  color: #D6B065;
}

/* Fond plein */
.bg-brown {
  background-color: #946E4A;
}

/* btn plein */
.btn-brown {
  background-color: #946E4A;
  color: #fff;
}

.text-brown {
  color: rgb(99.16, 73.7, 49.58);
}

.section-brown h3 {
  color: rgb(99.16, 73.7, 49.58);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-brown {
  color: #fff;
  background-color: rgb(231, 218.6756756757, 207);
  transition: background-color ease-in-out 0.5s;
}
.section-brown:hover {
  background-color: rgb(216.4, 196.5783783784, 177.8);
}

.bg-brown.bg-opacity-10 {
  background-color: rgba(148, 110, 74, 0.1);
  color: #fff;
}

.btn-brown.btn-opacity-10 {
  background-color: rgba(148, 110, 74, 0.1);
  color: #fff;
}

.bg-brown.bg-opacity-25 {
  background-color: rgba(148, 110, 74, 0.25);
  color: #fff;
}

.btn-brown.btn-opacity-25 {
  background-color: rgba(148, 110, 74, 0.25);
  color: #fff;
}

.bg-brown.bg-opacity-50 {
  background-color: rgba(148, 110, 74, 0.5);
  color: #fff;
}

.btn-brown.btn-opacity-50 {
  background-color: rgba(148, 110, 74, 0.5);
  color: #fff;
}

.bg-brown.bg-opacity-75 {
  background-color: rgba(148, 110, 74, 0.75);
  color: #fff;
}

.btn-brown.btn-opacity-75 {
  background-color: rgba(148, 110, 74, 0.75);
  color: #fff;
}

/* Couleur de texte */
.text-brown {
  color: #946E4A;
}

/* Fond plein */
.bg-beige {
  background-color: #FBF9F4;
}

/* btn plein */
.btn-beige {
  background-color: #FBF9F4;
  color: #000;
}

.text-beige {
  color: rgb(207.44, 183.66, 124.21);
}

.section-beige h3 {
  color: rgb(207.44, 183.66, 124.21);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-beige {
  color: #000;
  background-color: rgb(254, 253.5, 252.25);
  transition: background-color ease-in-out 0.5s;
}
.section-beige:hover {
  background-color: rgb(240.5, 233.25, 215.125);
}

.bg-beige.bg-opacity-10 {
  background-color: rgba(251, 249, 244, 0.1);
  color: #000;
}

.btn-beige.btn-opacity-10 {
  background-color: rgba(251, 249, 244, 0.1);
  color: #000;
}

.bg-beige.bg-opacity-25 {
  background-color: rgba(251, 249, 244, 0.25);
  color: #000;
}

.btn-beige.btn-opacity-25 {
  background-color: rgba(251, 249, 244, 0.25);
  color: #000;
}

.bg-beige.bg-opacity-50 {
  background-color: rgba(251, 249, 244, 0.5);
  color: #000;
}

.btn-beige.btn-opacity-50 {
  background-color: rgba(251, 249, 244, 0.5);
  color: #000;
}

.bg-beige.bg-opacity-75 {
  background-color: rgba(251, 249, 244, 0.75);
  color: #000;
}

.btn-beige.btn-opacity-75 {
  background-color: rgba(251, 249, 244, 0.75);
  color: #000;
}

/* Couleur de texte */
.text-beige {
  color: #FBF9F4;
}

/* Fond plein */
.bg-sable {
  background-color: #DDD1BA;
}

/* btn plein */
.btn-sable {
  background-color: #DDD1BA;
  color: #000;
}

.text-sable {
  color: rgb(176.6646601942, 149.0168932039, 96.0253398058);
}

.section-sable h3 {
  color: rgb(176.6646601942, 149.0168932039, 96.0253398058);
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  padding: 0.25em 1em;
}

.section-sable {
  color: #000;
  background-color: rgb(246.5, 243.5, 237.75);
  transition: background-color ease-in-out 0.5s;
}
.section-sable:hover {
  background-color: rgb(230.5150485437, 221.8733009709, 205.3099514563);
}

.bg-sable.bg-opacity-10 {
  background-color: rgba(221, 209, 186, 0.1);
  color: #000;
}

.btn-sable.btn-opacity-10 {
  background-color: rgba(221, 209, 186, 0.1);
  color: #000;
}

.bg-sable.bg-opacity-25 {
  background-color: rgba(221, 209, 186, 0.25);
  color: #000;
}

.btn-sable.btn-opacity-25 {
  background-color: rgba(221, 209, 186, 0.25);
  color: #000;
}

.bg-sable.bg-opacity-50 {
  background-color: rgba(221, 209, 186, 0.5);
  color: #000;
}

.btn-sable.btn-opacity-50 {
  background-color: rgba(221, 209, 186, 0.5);
  color: #000;
}

.bg-sable.bg-opacity-75 {
  background-color: rgba(221, 209, 186, 0.75);
  color: #000;
}

.btn-sable.btn-opacity-75 {
  background-color: rgba(221, 209, 186, 0.75);
  color: #000;
}

/* Couleur de texte */
.text-sable {
  color: #DDD1BA;
}

.btn-opacity {
  opacity: 0.6;
  filter: alpha(opacity=60); /* IE8 et + vieux, à supprimer quand tu veux */
  transition-property: opacity;
  transition-duration: 0.6s;
}

.btn-opacity:hover {
  opacity: 1;
  filter: alpha(opacity=100);
}

.btn-white {
  background: #ffffff;
  border-color: #ffffff;
}

.btn-white:hover {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
}

body {
  padding: 0;
  margin: 0;
  color: #555;
  font-family: "Alegreya Sans", sans-serif;
}

/***********************/
/* 	GENERALITÉS	    */
/***********************/
p {
  line-height: 1.4em;
}

hr.separation {
  clear: both;
  visibility: hidden;
}

a {
  color: rgb(0, 137, 209);
}

a:hover {
  text-decoration: underline;
}

h2 {
  padding: 0 0 0.1em 0;
  margin: 1em 0 0.2em 0;
  font-size: 1.5em;
  letter-spacing: 0.5px;
  font-family: "Lora", serif;
}

h3 {
  font-size: 1.3em;
  font-weight: normal;
  font-family: "Lora", serif;
  color: #666;
  background-color: #EEE;
  padding: 0.4em;
  margin-bottom: 6px;
}

h4 {
  font-size: 1.1em;
  font-weight: normal;
  font-family: "Lora", serif;
  color: #333;
  padding: 0;
  margin: 0.8em 0 0.4em 0;
}

dl {
  margin-top: 1em;
}

dt {
  font: 1.1em;
  margin: 0.8em 0 0 0;
}

dd {
  display: block;
  color: #999;
}

@media screen and (max-width: 576px) {
  div#ui-datepicker-div {
    z-index: 100 !important;
    left: 16px !important;
    right: 16px !important;
    width: 92%;
  }
}
@media (min-width: 768px) {
  h1 {
    font-size: 1.8em;
  }
  h1 big {
    white-space: nowrap;
  }
  h2 {
    font-size: 1.6em;
    padding: 0;
    margin: 1em 0 0.2em 0;
  }
  h3 {
    font-size: 1.4em;
  }
}
body {
  padding: 0;
  margin: 0;
  color: #555;
  font-family: "Alegreya Sans", sans-serif;
  background: url("/img/graphic/texture_tissu.png") repeat 0 0 transparent;
}

body.has-full-bg > section {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
}

body.has-full-bg > section picture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

body.has-full-bg > section picture img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

body.has-full-bg #mainHeader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  border: none;
  min-height: 0;
}

#mainHeader {
  z-index: 1000;
  padding-top: 48px;
}

#topNavBar {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.05);
  display: block;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
}
#topNavBar > ul.nav {
  padding: 0;
  margin: 0;
  height: 48px;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
}
#topNavBar > ul.nav > li.nav-item {
  padding: 0;
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
}
#topNavBar > ul.nav > li.nav-item#miniLogo {
  flex: 1.8 1 0;
  position: relative;
  overflow: visible;
  margin: 0;
  z-index: 1000;
}
#topNavBar > ul.nav > li.nav-item#miniLogo img {
  position: absolute;
  top: 5px;
  left: -10px;
  right: 0px;
  bottom: -30px;
  margin: 0;
}
#topNavBar > ul.nav > li.nav-item a.nav-link {
  display: block;
  color: #333;
  padding: 8px 0 0 0;
  margin: 0;
  height: 100%;
}
#topNavBar > ul.nav > li.nav-item a.nav-link:hover {
  background-color: white;
}
#topNavBar > ul.nav > li.nav-item a.nav-link i {
  vertical-align: middle;
  font-size: 1.4rem;
}
#topNavBar > ul.nav > li.nav-item a#topFlag {
  display: block;
  z-index: 2000;
  padding-top: 12px;
  text-decoration: none;
}
#topNavBar > ul.nav > li.nav-item a#topFlag span {
  display: none;
}
#topNavBar > ul.nav > li.nav-item a#topFlag img {
  height: 20px;
  width: 30px;
}
#topNavBar > ul.nav #topLanguageMenu .dropdown-menu {
  padding: 5px !important;
  background-color: rgba(251, 249, 244, 0.9);
  width: 100%;
  height: auto;
}
#topNavBar > ul.nav #topLanguageMenu .dropdown-menu li {
  border-bottom: 1px solid #CCC;
}
#topNavBar > ul.nav #topLanguageMenu .dropdown-menu li a {
  text-decoration: none;
}
#topNavBar > ul.nav #topLanguageMenu .dropdown-menu li a img {
  height: auto;
  width: 24px;
}
#topNavBar > ul.nav #topLanguageMenu .dropdown-menu li:last-child {
  border-bottom: none;
}

/* Phones - very small (max 480px) */
@media (max-width: 480px) {
  /* Hero, Footer, Nav, etc. */
}
/* Phones - small to medium (max 576px) */
@media (max-width: 576px) {
  /* ... */
}
/* Tablets (≥ 576px) */
@media (min-width: 576px) {
  /* ... */
}
/* Tablets landscape / small desktops (≥ 768px)  IPAd Mini */
@media (min-width: 768px) {
  #topNavBar > ul.nav {
    padding: 0;
    margin: 0;
  }
  #topNavBar > ul.nav > li.nav-item a#topFlag span {
    display: inline;
  }
  #topNavBar > ul.nav > li.nav-item a#topFlag img {
    width: 48px;
    height: 24px;
  }
}
/* Laptops (≥ 992px)  IPad Air */
@media (min-width: 992px) {
  #miniLogo {
    display: none;
  }
}
/* Large desktops (≥ 1200px) */
@media (min-width: 1200px) {
  /* ... */
}
/*

// --------------------------------------
// 2. Logo mobile & header principal
// --------------------------------------

#mainHeader {
  position: relative;
  z-index: 1000;
  padding: 0;
  margin: 0;
  background-color: $nav-header-bg;

  .navbar {
    position: relative;
    padding: 0;
    font-family: 'Alegreya Sans', 'Helvetica', sans-serif;
  }

  .btn-group {
    margin: 0;
    padding: 1px;

    > * {
      border: 0 !important;
      border-radius: 0 !important;
      margin: 1px;
    }
  }
}

#Logo {
  display: block;
  text-align: center;
  position: relative;
  pointer-events: none;
  margin: 32px 0 16px;

  img {
    max-width: 360px;
    width: 80%;
    height: auto;
  }
}


// --------------------------------------
// 3. Téléphone mobile + message d’accueil
// --------------------------------------

#telephone {
  background-color: $color-brown;
  color: $color-white;
  text-align: center;
  padding: 0.8em 1.3em;

  i {
    vertical-align: middle;
  }
}

#welcomeMessage {
  background-color: $nav-welcome-bg;
  color: $color-white;
  padding: 0.4em 0.8em;
  margin: 0;
  border: 0;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
  font-size: 1rem;
}
*/
/* _mainNavigation.scss */
/* Navigation principale : #mainNavLinks + items + mega-menu */
#logoXL {
  display: none;
}

/*  1. Menu principal (mobile first)
 -------------------------------------- */
#mainNavLinks {
  /* Par défaut : comportement Bootstrap pour le collapse mobile */
  z-index: 2040;
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  padding: 0;
}
#mainNavLinks .nav-item {
  padding: 0;
  margin: 0 2px 0 0;
  flex: 1 1 0;
  min-width: 0;
}
#mainNavLinks .nav-item > button {
  padding: 0.75rem 0;
  color: white;
  background-color: rgba(66, 84, 116, 0.75);
  width: 100%;
  border: none;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
}
#mainNavLinks .nav-item > button:hover, #mainNavLinks .nav-item > button:focus {
  background-color: #425474;
  text-decoration: none;
}
#mainNavLinks .offcanvas {
  margin: 132px 12px 0 12px;
  height: calc(100vh - 150px) !important;
  background-color: rgba(255, 255, 255, 0.75);
}
#mainNavLinks .offcanvas .offcanvas-header {
  width: 100%;
  font-size: 1.6em;
  background-color: #425474;
  color: #ffffff;
  padding: 0.5rem 1rem;
}
#mainNavLinks .offcanvas .offcanvas-header .btn-close {
  color: #ffffff !important;
}
#mainNavLinks .offcanvas .offcanvas-body {
  padding: 0.5em 1em;
  overflow-y: auto;
}
#mainNavLinks .offcanvas .offcanvas-body .col-md {
  padding: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(66, 84, 116, 0.75);
  margin-bottom: 1rem;
}
#mainNavLinks .offcanvas .offcanvas-body .item-parent {
  font-weight: 700;
  font-size: 1.2em;
  color: #425474;
  background-color: rgba(66, 84, 116, 0.15);
  padding: 1em;
  text-decoration: none;
}
#mainNavLinks .offcanvas .offcanvas-body .item-parent:hover {
  background-color: rgba(66, 84, 116, 0.5);
  color: white;
}
#mainNavLinks .offcanvas .offcanvas-body .item {
  text-align: left;
  font-size: 1em;
  color: #333;
  padding: 0.5em 1em;
  display: block;
}
#mainNavLinks .offcanvas .offcanvas-body .item:hover {
  text-decoration: none;
  background-color: rgba(66, 84, 116, 0.1);
  color: rgb(47.5054945055, 60.4615384615, 83.4945054945);
}
#mainNavLinks .offcanvas .offcanvas-body .cardNavLink {
  padding: 10px;
  background-color: white;
}
#mainNavLinks .offcanvas .offcanvas-body .cardNavLink .card-img-overlay a {
  display: block;
  text-decoration: none;
  background-color: rgba(66, 84, 116, 0.35);
  color: white;
  font-size: 2.4em;
}
#mainNavLinks .offcanvas .offcanvas-body .cardNavLink:hover {
  background-color: #425474;
}
#mainNavLinks .offcanvas .offcanvas-body .cardNavLink:hover .card-img-overlay a {
  background-color: #425474;
}

/* 2. Méga-menu header (vue header_megamenu)
 -------------------------------------- */
#mainNavLinks .dropdown-menu .row {
  margin: 0;
}
#mainNavLinks .dropdown-menu .col-12.col-md {
  padding: 0;
}

/* Phones - very small (max 480px) */
@media (max-width: 480px) {
  /* Hero, Footer, Nav, etc. */
}
/* Phones - small to medium (max 576px) */
/* Tablets (≥ 576px) */
@media (min-width: 576px) {
  #mainNavLinks {
    padding: 0 0 0 200px;
  }
  #mainNavLinks .offcanvas .offcanvas-body .item-parent {
    font-size: 1.6rem;
  }
  #mainNavLinks .offcanvas .offcanvas-body .item {
    font-size: 1.4rem;
  }
}
/* Tablets landscape / small desktops (≥ 768px) */
/* Laptops (≥ 992px) */
@media (min-width: 992px) {
  #mainNavLinks {
    padding: 0;
  }
  #mainNavLinks .nav-item#logoXL {
    flex: 1.3 1 0;
    position: relative;
    top: -64px;
    display: block;
    z-index: 2009;
    position: relative;
  }
  #mainNavLinks .nav-item#logoXL::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -50%;
    width: 200%;
    height: 200%;
    z-index: 2010;
    pointer-events: none;
    /* Dégradé gris → transparent */
    background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0) 100%);
    /* Optionnel : arrondir un peu */
  }
  #mainNavLinks .nav-item#logoXL img {
    position: relative;
    z-index: 2011;
  }
  #mainNavLinks {
    padding: 32px 6px;
  }
  #mainNavLinks .nav-item {
    margin: 0 6px;
  }
}
/* Large desktops (≥ 1200px) */
@media (min-width: 1200px) {
  /* ... */
}
/* Conteneur général du diapo + titre (mobile-first) */
header.hero {
  position: relative; /* référence pour l’absolu du titre */
  overflow: hidden;
  min-height: 40vw;
}
header.hero .hero--thin {
  height: clamp(80px, 20vh, 160px);
}
header.hero .hero--thin h1.title {
  top: 20vh !important;
}
header.hero .hero-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
header.hero .hero-bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
header.hero h1.title {
  position: absolute;
  top: 30vh !important;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 2rem 1rem;
  width: 100%;
  font-family: "Lora", serif;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  pointer-events: none; /* les clics passent au carousel */
  /* ex .title-name (ancienne ligne principale) */
  font-size: 2.4em;
  line-height: 1.1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
header.hero h1.title .short {
  font-size: 4em;
}
header.hero h1.title .long {
  font-size: 1.8em;
}

/* Breakpoints */
@media (min-width: 480px) {
  header.hero h1.title {
    margin-top: 6rem;
  }
  header.hero.hero--thin h1.title {
    margin-top: 2rem;
  }
}
@media (min-width: 768px) {
  header.hero.hero--thin {
    height: clamp(120px, 20vh, 160px);
  }
  header.hero.hero--thin h1.title {
    padding-top: 2rem !important;
  }
  header.hero h1.title {
    padding: 6rem 2rem 2rem 2rem;
  }
  header.hero h1.title.short {
    font-size: 10vw;
  }
  header.hero h1.title.long {
    font-size: 4vw;
  }
}
@media (min-width: 1200px) {
  header.hero h1.title {
    font-size: 8vw;
    line-height: 1.1;
  }
  header.hero h1.title .short {
    font-size: 14vw;
  }
  header.hero h1.title .long {
    font-size: 4vw;
  }
  header.hero h2.subtitle {
    font-size: clamp(2.4rem, 2.8vw, 3.2rem);
  }
}
#footer {
  background: url("/img/graphic/texture_tissu.png") repeat 0 0, rgba(148, 110, 74, 0.2);
  /*background: url('/images/structure/pied-Abri-de-Camargue-2012.png') repeat-x left bottom rgb(255,199,0);*/
  min-height: 200px;
  position: relative;
  z-index: 100;
  padding: 4px 0 0 0;
}

#footer .container {
  padding: 0;
}

#footer-logo {
  max-width: 120px;
  position: relative;
  left: -22px;
}

#footer-mention {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 16px;
  margin: 4px 0 0 0;
}

#footer-mention ul {
  list-style: none;
  margin: 0 -16px 0 0px;
  padding: 0;
}

#footer-mention li {
  display: inline-block;
  list-style: none;
  margin: 0 6px 6px 0;
  padding: 0;
  width: 64px;
  height: 64px;
}

#footer-mention li:last-child {
  margin: 0 0 6px 0;
}

#footer_menu {
  padding: 0;
  margin: 0;
}

#footer_menu .menu {
  padding: 0;
  margin: 4px 0 0 0;
}

#footer_menu article {
  padding: 32px;
  background-color: rgba(255, 255, 255, 0.6);
  flex: 1;
}

#footer_menu #footer-contact {
  background-color: rgba(255, 255, 255, 0.4);
}

#footer_menu ul,
#footer .menu li {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer_menu h3 {
  color: #946E4A;
  font-size: 1.6em;
  font-variant: small-caps;
  background-color: transparent;
  border: none;
  padding: 0.8em 0;
  margin: 0;
}

#footer_menu a {
  color: #946E4A !important;
  font-size: 1em;
}

#footer-facebook {
  display: block;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 4px;
}

#footer-facebook img {
  display: block;
  background-color: white;
  padding-left: 8px;
}

#footer-facebook:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

#footer-instagram {
  display: block;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 4px;
}

#footer-instagram img {
  display: block;
  background-color: white;
  padding-left: 8px;
}

#footer-instagram:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

#footer-contact address span {
  width: 32px;
  margin-right: 8px;
  text-align: center;
  background: white;
  border-radius: 32px;
  padding: 8px;
}

/* Phones - very small (max 480px) */
/* Phones - small to medium (max 576px) */
/* Tablets (≥ 576px) */
/* Tablets landscape / small desktops (≥ 768px) */
/* Laptops (≥ 992px) */
/* Large desktops (≥ 1200px) */
/* GuestApp widget */
#guestapp-reviews-simple {
  font-size: 1.2em;
  background-color: rgba(221, 64, 117, 0.85);
  margin: 0 !important;
}

#guestapp-reviews-simple div.col-12 {
  /*background-color: rgba(255,255,255,0.15);*/
}

#guestapp-reviews-simple .guestapp-establishment {
  background-color: rgb(221, 64, 117);
  text-align: left;
  padding: 0 16px 0 100px;
  color: white;
}

#guestapp-reviews-simple .guestapp-establishment p {
  padding: 0;
  margin: 12px 0;
}

#guestapp-reviews-simple.guestapp-simple-widget {
  position: relative;
  font-size: 0.8em !important;
}

#guestapp-reviews-simple.guestapp-simple-widget .guestapp-mb3 {
  margin: 3px;
}

#guestapp-reviews-simple.guestapp-simple-widget .guestapp-mb10 {
  margin-bottom: 10px;
}

#guestapp-reviews-simple.guestapp-simple-widget .guestapp-big2 {
  font-size: 1.2em;
}

#guestapp-reviews-simple.guestapp-simple-widget .guestapp-big3 {
  font-size: 2.4em;
  border-bottom: 2px solid rgb(221, 64, 117);
  margin: 0;
  line-height: 1.2em;
}

#guestapp-reviews-simple.guestapp-simple-widget .guestapp-footer {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  margin: 1px;
  padding: 12px;
  background-color: white;
  height: 69px;
}

#guestapp-reviews-simple.guestapp-simple-widget .guestapp-footer img {
  height: 100%;
}

#guestapp-reviews-simple.guestapp-simple-widget div.guestapp-average {
  position: absolute;
  top: 8px;
  left: 8px;
  display: block;
  height: 96px;
  width: 96px;
  padding-top: 16px;
  background-color: rgb(255, 255, 255) !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1) !important;
  border-radius: 50%;
  color: rgb(221, 64, 117);
  text-align: center;
  font-size: 1.2em;
}

#guestapp-reviews-simple div.infos {
  color: white;
  padding: 16px 32px;
  text-align: left;
}

#guestapp-reviews-simple h1 {
  background-color: transparent;
  margin: 1em 0 0 0;
  font-size: 1.4em;
}

#guestapp-reviews-simple .guestapp-cta a {
  background-color: rgb(255, 255, 255) !important;
  color: rgb(221, 64, 117);
  padding: 4px 24px;
  text-align: center;
  border-radius: 16px;
  font-size: 1.1em;
}

#guestapp-reviews-simple .guestapp-cta {
  text-align: center;
}

.guestapp-widget-bright .guestapp-scale {
  border-top: none !important;
  position: relative;
  top: -8px;
}

.guestapp-infos {
  padding: 10px 100px 0 0 !important;
}

/* Responsive styles */
/* Extra small devices (phones, less than 576px) */
/* Phones - very small (max 480px) */
@media (max-width: 480px) {
  /*  */
}
/* Phones - small to medium (max 576px) */
@media (max-width: 576px) {
  /* ... */
}
/* Tablets (≥ 576px) */
@media (min-width: 576px) {
  /* ... */
}
/* Tablets landscape / small desktops (≥ 768px) */
@media (min-width: 768px) {
  /* ... */
}
/* Laptops (≥ 992px) */
@media (min-width: 992px) {
  /* ... */
}
/* Large desktops (≥ 1200px) */
@media (min-width: 1200px) {
  /* ... */
}
dl.plan-site {
  margin-top: 3em;
}

.plan-site dt {
  text-transform: uppercase;
  margin: 1em 0 0 0;
  color: #333333;
  font-size: 1.2em;
}

.plan-site dd {
  margin: 0.5em 0 0.5em 0em;
  color: #666;
}

.plan-site ol {
  border-bottom: 1px solid #ccc;
  margin-bottom: 2em;
  padding-bottom: 1em;
  padding-left: 2em;
}

/* Phones - very small (max 480px) */
@media (max-width: 480px) {
  /* Hero, Footer, Nav, etc. */
}
/* Phones - small to medium (max 576px) */
@media (max-width: 576px) {
  /* ... */
}
/* Tablets (≥ 576px) */
@media (min-width: 576px) {
  /* ... */
}
/* Tablets landscape / small desktops (≥ 768px) */
@media (min-width: 768px) {
  /* ... */
}
/* Laptops (≥ 992px) */
@media (min-width: 992px) {
  /* ... */
}
/* Large desktops (≥ 1200px) */
@media (min-width: 1200px) {
  /* ... */
}
.card {
  overflow: hidden;
}
.card .card-img {
  transition: transform 0.6s ease;
}
.card .card-img-overlay {
  transition: background-color 0.4s ease;
}
.card .card-title {
  padding: 1em;
  transition: transform 0.4s ease, background-color 0.4s ease;
}

.card:hover .card-img {
  transform: scale(1.05);
}
.card:hover .card-img-overlay {
  background-color: rgba(0, 0, 0, 0.25);
}
.card:hover .card-title {
  transform: translateY(-4px);
  background-color: rgba(0, 0, 0, 0.1);
}
.card:hover .card-img-overlay .card-title {
  transform: translateY(-4px);
  background-color: rgba(0, 0, 0, 0.7);
}

/*# sourceMappingURL=main.css.map */