/* MAIN CSS FILE FOR DEV .......................................................

Explication des fichiers :
- DEV : assets/css/
- PROD : task "grunt buildcss" pour builder le CSS build/css/main.css

Couleurs :
- Voir helpers.css
*/
/*  RESETS .....................................................................
	Pris certains styles de reboot.css et ajouter certains. */
*,
::after,
::before {
  box-sizing: border-box;
}
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@-ms-viewport {
  width: device-width;
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
picture {
  display: block;
}
[tabindex="-1"]:focus {
  outline: 0 !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
fieldset,
ul,
ol,
li,
figure,
picture {
  margin: 0;
  padding: 0;
  border: 0;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
textarea {
  resize: vertical;
}
/* Pour debug */
/* * { outline: 1px solid red; outline-offset: -1px; } */
/*  BASE TAGS ............................................................... */
html {
  font-size: 100%;
  margin: 0;
  padding: 0;
}
body {
  color: #3f3c3c;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  padding: 0;
  background-color: #fff;
}
body.locked {
  margin: 0;
  height: 100%;
  overflow: hidden;
}
/* 
	Font size global du site.
	On le met sur tous les enfants direct et pas directement sur le body car
	on veut conserver le 16px de base sur le body. On ne connait pas tout 
	l'impact que ca aurait d'aller modifier le 16px de base, qui est le defaut 
	dans la plupart des navigateurs. Avec ce code, on la joue safe. */
body > * {
  font-size: 1em;
}
/* Liens de base */
a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}
a:hover {
  text-decoration: none;
}
/* 
	Focus de base : laisser celui du browser par defaut.
	Only suppress the focus ring once what-input has successfully started.
	Suppress focus ring on form controls for mouse users. */
[data-whatintent='touch'] *:focus,
[data-whatintent='mouse'] *:focus {
  outline: none;
}
/* Sup and sub. */
sup {
  vertical-align: super;
  font-size: 40%;
}
/* HR */
.sSeparator {
  border-top: 1em solid #fff;
  margin: 0;
}
.hrNarrowB {
  border-top: 0.4em solid #695e4a;
  margin: 0;
  width: 10em;
  margin-left: auto;
  margin-right: auto;
}
* + .hrNarrowB {
  margin-top: 1.5em;
}
/* All images responsive */
img,
svg {
  height: auto;
  width: 100%;
  display: block;
}
img.forceBigger {
  width: 100%;
}
/* Removes animation when the page renders. */
.preload *,
.removeTransition {
  transition: none !important;
}
/*  PAGE BASE ................................................................*/
/*  OWL SELECTOR
	L'espacement entre les elements se fera souvent avec le margin-top.
	Avec cette facon de fonctionner, le 1er item n'aura jamais de margin-top.
	L'espacement entre les titres est dans titles.css. */
* + p,
* + .pMargin,
* + ul,
* + ol {
  margin-top: 1.5em;
}
/*	WIDTHS
	Les largeurs sont assez standard pour avoir des classes uniquement pour ca.
	Les exceptions sont gerer dans les styles custom de sections.

	Options de largeur :
	1. FULL width : Pas de classe, car par defaut c'est 100% de large
	2. STD width : .wStd
	3. NARROW width : .wNarrow
	*/
.wStd {
  width: 90%;
  max-width: 75em;
  margin-left: auto;
  margin-right: auto;
}
.wNarrow {
  width: 90%;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
}
.wStd .wNarrow {
  width: 100%;
}
/*	MAIN
	Comme la navigation du haut est sticky, on doit ajouter un margin top au
	main pour le descendre un peu, sinon le debut du main est hidden par
	la topbar. */
main {
  padding-top: 8em;
  overflow: hidden;
  /* overflow-x: hidden; */
}
main a {
  text-decoration: underline;
}
/* MOBILE menu a partir de iPad portrait */
@media (max-width: 991px) {
  main {
    padding-top: 4em;
  }
}
/* 	AUTO STYLED CONTENT:
	Useful for CMS pages because the end-user doesn't have to write
	specific classes to get the right formatting.
	Les paragraphes posent toujours un probleme dans un site web, car
	si on les stylise comme il faut, il faut ensuite les redefinir a pleins
	d'endroits (car c'est un tag qu'on utilise un peu pour n'importe quel
	contenu). Donc, au lieu de styliser les p { }, on utilise la classe
	.typo sur un container. Cette classe stylisera les <p> child de
	ce container .typo.

	C'est un peu le meme probleme pour les liens (<a>), car on les
	utilise un peu partout, mais doivent aussi avoir un style pour les
	inline links. On utilise la classe .typoLinks pour ceux-ci.
	*/
.typo {
  line-height: 1.5;
}
/* Default ul */
.typo ul:not([class]),
ul.list {
  list-style: none;
}
.typo ul:not([class]) li,
ul.list li {
  list-style: none;
  margin-bottom: 0;
  padding-left: 1.25em;
  position: relative;
}
.typo ul:not([class]) li::before,
ul.list li::before {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  display: block;
  content: '';
  background-color: #000;
  width: 0.4em;
  height: 0.4em;
  top: 0.6em;
  left: 0;
}
/* Default ol */
.typo ol:not([class]) {
  list-style: none;
  counter-reset: li;
}
.typo ol:not([class]) li {
  list-style: none;
  counter-increment: li;
  padding-left: 1.25em;
  position: relative;
}
.typo ol:not([class]) li::before {
  content: counter(li);
  color: #000;
  display: inline-block;
  font-weight: bold;
  width: 1.25em;
  margin-left: -1.25em;
}
/* Variante dark */
.onDark,
.typo .onDark {
  color: #fff;
}
.typo .onDark ul:not([class]) li::before,
.typo .onDark ol:not([class]) li::before {
  background-color: #fff;
}
/* Text links / Standard pour texte de contenu */
.typoLinksText a {
  color: #695e4a;
  text-decoration: underline;
  font-weight: 400;
  transition: color 0.3s;
}
.typoLinksText a:hover {
  color: #000;
}
/* Bold links / Liens dans regions, gras, pas d'underline. */
.typoLinks a {
  color: #695e4a;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}
.typoLinks a:hover {
  color: #000;
}
/* Footer links */
.typoLinksFooter a {
  opacity: 1;
  transition: opacity 0.3s;
}
.typoLinksFooter a:hover {
  opacity: 0.65;
}
/* Subtle links */
.typoLinksSubtle a {
  opacity: 1;
  transition: opacity 0.3s;
}
.typoLinksSubtle a:hover {
  opacity: 0.7;
}
/* 	LISTS
	Listes ul li utiles dans le site. */
/* Liste sans style */
ul.listNS {
  list-style: none;
}
/* Liste pour liens dans footer */
ul.listNSFooter {
  list-style: none;
}
ul.listNSFooter li {
  line-height: 1.3;
  margin-bottom: 0.5em;
}
/* Liste inline horizontale. */
ul.listInline {
  list-style: none;
  padding-left: 0;
  line-height: 1.5;
}
ul.listInline li {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  padding-left: 0;
}
ul.listInline li:not(:last-child) {
  margin-right: 2em;
}
/* Liste inline horizontale plus grosse. */
ul.listInlineBig {
  list-style: none;
  padding-left: 0;
  line-height: 1.5;
}
ul.listInlineBig li {
  position: relative;
  display: inline-block;
  font-size: 1.65em;
  margin-bottom: 0;
  padding-left: 0;
}
ul.listInlineBig li:not(:last-child) {
  margin-right: 2em;
}
ul.listInlineBig li:not(:last-child):before {
  content: "|";
  display: block;
  position: absolute;
  right: -1.2em;
}
/*	SVGs .......................................................................
	Styles des SVGs du site. Les SVGs sont majoritairement utile pour les
	icones, mais pas uniquement pour ca. */
/*	WRAP
	Chaque icone / SVG est wrapped dans un .svgIcon.
	On utilise <span>, mais si pertinent on prend autre chose (ex : <figure>) */
.svgIcon {
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  width: 1em;
  height: 1em;
}
.svgIcon > svg {
  max-width: none;
  display: block;
  /* make it match the text color */
  fill: currentColor;
  /* make it match the font-size */
  width: 1em;
  height: 1em;
}
/*	SET SVG PARTICULAR SIZES
	Certains SVG n'ont pas la meme largeur que hauteur. On les ajuste ici.
	Fixed size parce qu'IE (et vieux Safari) est incompetent */
.svgIcon--logo-enchante-vallee-coaticook,
.svgIcon--logo-enchante-vallee-coaticook svg {
  width: 230px;
  height: auto;
}
.svgIcon--logo-enchante,
.svgIcon--logo-enchante svg {
  width: 3.5em;
  height: 1em;
}
.svgIcon--logo-enchante-feuille,
.svgIcon--logo-enchante-feuille svg {
  width: 3.01em;
  height: 1em;
}
.svgIcon--logo-enchante-ligne,
.svgIcon--logo-enchante-ligne svg {
  width: 3.01em;
  height: 0.2em;
}
/* Couleurs */
:root {
  --color-primary: #173F35;
  --color-vert-fonce: #173F35;
  --color-secondary: #E58B5E;
  --color-rose: #E58B5E;
  --color-tertiary: #8BD1CB;
  --color-bleu: #8BD1CB;
  --color-jaune: #D4DE24;
  --color-bleu-pale: #d4efed;
  --color-bleu-tres-pale: #e4f6f4;
  --color-rose-tres-pale: #fcf5f2;
}
/* 	FONTS ......................................................................

	Montserrat -- Google webfont
*/
html,
body,
button,
input,
select,
textarea {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
strong,
.strong {
  font-weight: 700;
}
em,
i,
.italic {
  font-style: italic;
}
@font-face {
  font-family: 'Reigo';
  src: url('../fonts/reigo-bolditalic-webfont.woff2') format('woff2'), /* Modern Browsers */ url('../fonts/reigo-bolditalic-webfont.woff') format('woff');
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  /*text-rendering: optimizeLegibility; */
}
.texte-reigo,
.texte-Reigo,
.Reigo {
  font-family: "Reigo", Georgia;
  font-weight: 700;
  font-style: italic;
}
/* Fonts */
/*  TITLES .................................................................. */
h1,
.h1 {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 5em;
  line-height: 0.95;
  font-family: "Reigo", Georgia;
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.2);
  /*text-transform: uppercase;*/
}
h2,
.h2 {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 3em;
  line-height: 1;
  font-family: "Reigo", Georgia;
  font-weight: 700;
  font-style: italic;
  color: var(--color-rose);
  /*font-weight: 600;text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.6);*/
  /*text-transform: uppercase;*/
}
h3,
.h3,
.homeTitle,
.planifiezTitle,
.intervenantTitle,
.municipaliteTitle {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 2em;
  line-height: 1.1;
  font-family: "Reigo", Georgia;
  font-weight: 700;
  font-style: italic;
  text-transform: none;
  text-shadow: none;
}
h4,
.h4 {
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1.1;
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: none;
}
/* Autres options de grosseur de texte */
.txtBigger {
  font-size: 1.125em;
}
.txtBiggerH {
  font-size: 1.25em;
  line-height: 1.3;
  /*font-weight: 600;*/
}
/* Margins : common (ajuster l'espacement EN HAUT de l'element). */
* + h1,
* + .h1 {
  margin-top: 1em;
}
* + h2,
* + .h2 {
  margin-top: 2em;
}
* + h3,
* + .h3 {
  margin-top: 1.5em;
}
/* Margins : after (ajuster l'espacement EN BAS de l'element). */
/* Margins : specific (COMBINAISONS particulieres d'elements). */
/* Font-size pour headings particuliers. */
.homeTitle,
.planifiezTitle {
  font-size: 3.5em;
  line-height: 1;
  font-family: "Reigo", Georgia;
  font-weight: 700;
  font-style: italic;
  color: var(--color-rose);
}
.intervenantTitle,
.municipaliteTitle {
  font-size: 1.6em;
  font-family: "Montserrat", sans-serif;
}
/* Font-size plus petits */
@media (max-width: 1299px) {
  h1,
  .h1 {
    font-size: clamp(32px, 10vw, 3.5em);
    /*font-size: calc(1em + 4vw);*/
  }
  h2,
  .h2 {
    font-size: clamp(28px, 8vw, 3em);
    /*font-size: calc(1em + 2.7vw);*/
  }
  h3,
  .h3 {
    font-size: calc(1em + 1vw);
  }
  .homeTitle,
  .planifiezTitle {
    font-size: clamp(32px, 10vw, 3.5em);
    /* font-size: calc(2.6em + 0.5vw); */
  }
  .txtBigger {
    font-size: 1.25em;
  }
}
/* On dark */
.onDark h1,
.onDark .h1,
.onDark h2,
.onDark .h2,
.onDark h3,
.onDark .h3 {
  color: #fff;
}
/*  SUPTITLE
    Suptitle over the title. */
.suptitle {
  font-size: 1.4em;
  /*font-weight: 600;text-transform: uppercase;text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.6);*/
}
.suptitle + * {
  margin-top: 0.5em;
}
/* Variation sous le titre. Dans le fond, on veut seulement le font-size de ce style. */
* + .suptitle--underTitle {
  margin-top: 0.8em;
}
/* Font-size plus petits */
@media (max-width: 1299px) {
  .suptitle {
    font-size: calc(1em + 1vw);
  }
}
/*  SUBTITLE
    Subtitle just under the title, small than title but bigger than std p. */
.subtitle {
  font-size: 1.25em;
  line-height: 1.1;
  font-weight: 600;
}
* + .subtitle {
  margin-top: 0.2em;
}
/*  SUBTITLE LIGHTER
    Subtitle just under the title, small than title but bigger than std p. */
.subtitleLight {
  font-size: 1.125em;
  line-height: 1.4;
}
* + .subtitleLight {
  margin-top: 0.8em;
}
/* Titles */
/*  FORMS ................................................................... */
* + .form {
  margin-top: 3em;
}
/*  INPUT */
.formInput,
.formTextarea,
.formSelect {
  border: 1px solid #877e6f;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 1em;
  font-weight: normal;
  line-height: 1.2;
  display: block;
  padding: 0.7em 1.1em;
  border-radius: 0;
  margin: 0;
  color: #6e6450;
  transition: border-color 0.3s ease;
}
/* On dark */
.onDark .formInput,
.onDark .formTextarea,
.onDark .formSelect {
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
  background-color: transparent;
}
/* Eviter le zoom iOS sur form sur mobile. */
@media (max-width: 767px) {
  .formInput,
  .formTextarea {
    font-size: 16px;
  }
}
/*  SELECT */
.formSelect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../../img/icons/icon-arrow-dropdown.svg);
  background-repeat: no-repeat;
  background-position: right 1.4em center;
  background-size: 1.25em;
  /* max-width: 100%; */
  /* width: auto; */
  padding-right: 5em;
  color: #7e8082;
}
.formSelect::-ms-expand {
  display: none;
}
/*  TEXTAREA
    Styles de base dans formInput */
.formTextarea {
  width: 100%;
  max-width: 100%;
  min-height: 8em;
  height: 8em;
}
/*  FOCUS */
.formInput:focus,
.formTextarea:focus,
.formSelect:focus {
  border-color: #000;
}
/* On dark */
.onDark .formInput:focus,
.onDark .formTextarea:focus,
.onDark .formSelect:focus {
  border-color: #fff;
}
/*  INPUT FILE TYPE */
.formInputFile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  z-index: -1;
  padding: 0;
}
/* Label for input file type */
.formInputFile--label {
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Pour que ca fonctionne, parent doit etre overflow:hidden, mais si tu fais ca sur .formItem ou .formGroup, tu t'attires des problemes dans un form dans un lightbox (ca casse le scroll on touch sur input). */
}
.formInputFile--label * {
  pointer-events: none;
}
/*  CHECKBOX */
.formCheckbox {
  display: inline-block;
  margin-right: 5px;
}
/*  CHECKBOX & RADIO
    Custom style, c'est pour ca qu'il y a tant de class. */
.formCheckboxW,
.formRadioW {
  display: inline-block;
  margin-right: 2em;
}
.formCheckboxW:last-child,
.formRadioW:last-child {
  margin-right: 0;
}
/* Hide the default radio / checkbox, because we want to custom style it. */
.formCheckboxI,
.formRadioI {
  position: absolute;
  opacity: 0;
}
/* Label styles */
.formCheckboxL,
.formRadioL {
  cursor: pointer;
}
/* Les styles custom sont ici */
.formCheckboxI + .formCheckboxL::before,
.formRadioI + .formRadioL::before {
  content: '';
  background: #fff;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 1px solid #877e6f;
  border-radius: 0;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  position: relative;
  top: 0;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s cubic-bezier(0, 0, 0.3, 1);
}
/* Active + focus */
/* Checked */
.formCheckboxI:checked + .formCheckboxL::before,
.formRadioI:checked + .formRadioL::before {
  background-color: #877e6f;
  box-shadow: inset 0 0 0 0.3em #ffffff;
}
/* Focus: seulement si user utilise keyboard. */
[data-whatintent='keyboard'] .formCheckboxI:focus + .formCheckboxL::before,
[data-whatintent='keyboard'] .formRadioI:focus + .formRadioL::before {
  outline: 2px solid #4d90fe;
}
/* Disabled */
.formCheckboxI:disabled + .formCheckboxL,
.formRadioI:disabled + .formRadioL {
  cursor: default;
}
.formCheckboxI:disabled + .formCheckboxL::before,
.formRadioI:disabled + .formRadioL::before {
  background-color: #e8e8e8;
  opacity: 0.5;
  cursor: auto;
}
/* Empty (?) */
.formCheckboxI + .formCheckboxL:empty::before,
.formRadioI + .formRadioL:empty::before {
  margin-right: 0;
}
/* Radio mods */
.formRadioI + .formRadioL::before {
  border-radius: 50%;
}
/*  FORM GROUP et FORM ITEM
    Pour espacement entre groupes de form items. */
.formItem__text {
  display: block;
  margin-bottom: 1em;
}
* + .formGroup,
* + .formItem {
  margin-top: 1.5em;
}
/* Cols in form */
/* Form send */
* + .formGroup--send {
  margin-top: 3em;
}
/* 2 cols on tablet+ */
@media (min-width: 768px) {
  .formGroup--half {
    display: flex;
    justify-content: space-between;
  }
  .formGroup--half .formItem {
    flex: 0 0 47.5%;
    margin: 0;
  }
}
/*  FORM LABEL */
.formLabel {
  font-size: 1em;
  line-height: 1.2em;
  display: block;
  margin-bottom: 0.2em;
  font-weight: bold;
}
/*  PLACEHOLDER TEXT */
::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
::-moz-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}
::placeholder {
  color: rgba(0, 0, 0, 0.5);
}
/* On dark */
.onDark ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.onDark ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.onDark :-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.onDark ::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.onDark ::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
/*  ALT
    Bouton a droite du input, "dans" le input. */
.formItem--submitAtRight {
  position: relative;
}
.formItem--submitAtRight .btnIcon {
  font-size: 2.5em;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.3em;
}
.formItem--submitAtRight .btnIcon .svgIcon {
  font-size: 0.55em;
}
/* Forms */
/*  BUTTONS and LINKS ....................................................... */
/*  STANDARD BUTTON
    Bouton standard du site. */
.btn {
  position: relative;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-block;
  font-weight: 600;
  font-size: 1em;
  line-height: 1.2;
  color: var(--color-primary);
  background-color: #fff;
  margin: 0.2em;
  padding: 0.8em 1.5em 0.7em 1.5em;
  text-transform: uppercase;
  text-decoration: none;
  box-sizing: border-box;
  text-align: center;
  max-width: 100%;
  /*box-shadow: inset 0 0 0 1px #877e6f;*/
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 500px;
}
.btn__label {
  display: block;
  position: relative;
  z-index: 2;
}
.btn__icon {
  display: block;
  position: absolute;
  z-index: 2;
  color: var(--color-primary);
  left: 1.5em;
  top: 51%;
  transform: translate(0, -50%);
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn__icon .svgIcon {
  display: block;
}
.btn__icon + .btn__label {
  margin-left: 1.7em;
}
.btn:first-child {
  margin-top: 0;
  margin-left: 0;
}
.btn:last-child {
  margin-bottom: 0;
}
.btn:first-child:last-child {
  margin: 0;
}
/* Hover */
.btn:hover {
  color: #fff;
  background-color: var(--color-bleu);
}
.btn:hover .btn__icon {
  color: #fff;
  transform: translate(0.3em, -50%);
}
/*  ALT :
      Bouton avec BG dark - rose. */
.btn--dark,
.btn--rose {
  color: #fff;
  background-color: var(--color-rose);
}
.btn--dark .btn__icon,
.btn--rose .btn__icon {
  color: #fff;
}
.btn--dark:hover,
.btn--rose:hover {
  color: #fff;
  background-color: var(--color-bleu);
}
.btn--dark:hover .btn__icon,
.btn--rose:hover .btn__icon {
  color: #fff;
}
/* Bouton avec BG bleu */
.btn--bleu {
  color: #fff;
  background-color: var(--color-bleu);
}
.btn--bleu .btn__icon {
  color: #fff;
}
.btn--bleu:hover {
  color: #fff;
  background-color: var(--color-rose);
}
.btn--bleu:hover .btn__icon {
  color: #fff;
}
/* Bouton contour blanc */
.btn--contour-blanc {
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
  border: 2px solid #fff;
}
.btn--contour-blanc .btn__icon {
  color: #fff;
}
.btn--contour-blanc:hover {
  color: #fff;
  background-color: var(--color-rose);
}
.btn--contour-blanc:hover .btn__icon {
  color: #fff;
}
/*  BTN ICON
    Bouton qui contient seulement une icone avec BG. */
.btnIcon {
  font-size: 4em;
  border: none;
  color: #fff;
  background: #877e6f;
  cursor: pointer;
  font-weight: normal;
  text-decoration: none;
  text-align: left;
  line-height: 1;
  display: inline-block;
  position: relative;
  padding: 0;
  width: 1em;
  height: 1em;
}
.btnIcon .svgIcon {
  font-size: 0.4em;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
}
/* Hover */
.btnIcon:hover .svgIcon {
  opacity: 0.5;
}
/* On dark */
.onDark .btnIcon {
  color: #695f4b;
  background-color: #fff;
}
/*  ALT:
      Nav icons with arrows. */
.btnIcon--nav {
  font-size: 3em;
  background-color: transparent;
  color: #000;
}
.btnIcon--nav .svgIcon {
  font-size: 0.4em;
  transition: transform 0.3s;
}
/* Hover, remettre l'opacity car on anime seulement le transform. */
.btnIcon--nav:hover .svgIcon {
  opacity: 1;
}
/* Hover (faire l'effet sur le svgIcon permet de positioner
            le btnIcon avec des transform sans impact sur l'effet hover. */
@media (min-width: 992px) {
  .btnIcon--nav:hover .svgIcon {
    transform: translate(-75%, -50%);
  }
  .btnIcon--nav + .btnIcon--nav:hover .svgIcon {
    transform: translate(-25%, -50%);
  }
}
/*  ALT:
            Pictogrammes. */
.btnIcon--picto {
  font-size: 3em;
  background: transparent;
  color: #b4aea4;
  transition: color 0.3s;
}
.btnIcon--picto .svgIcon {
  transition: none;
  font-size: 0.8em;
}
/* Hover */
.btnIcon--picto:hover {
  color: #6e6450;
}
.btnIcon--picto:hover .svgIcon {
  opacity: 1;
}
/*  ALT:
            No background. */
.btnIcon--noBG {
  background: transparent;
  color: #695f4b;
}
/* On dark */
.onDark .btnIcon--noBG {
  color: #fff;
  background-color: transparent;
}
/*  ALT:
            No spacing (padding). */
.btnIcon--noSpacing .svgIcon {
  font-size: 1em;
}
/*  LINK ICON
    Lien avec icone a droite qui s'animate on hover. */
.inlineLinkIcon {
  font-size: 1em;
  position: relative;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-block;
  padding: 0 1.3em 0 0;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.3s;
}
.inlineLinkIcon__icon {
  font-size: 0.7em;
  display: block;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 50%;
  transform: translate(-0.3em, -50%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.inlineLinkIcon__icon .svgIcon {
  display: block;
}
/* Hover */
.inlineLinkIcon:hover {
  opacity: 0.7;
}
.inlineLinkIcon:hover .inlineLinkIcon__icon {
  transform: translate(0em, -50%);
}
/*  LINK ICON "PLUS"
    Lien avec icone a droite qui s'animate on hover.
    Utile pour le lien "Plus" pour afficher la description complete de l'intervenant. */
.inlinePlusLink {
  font-size: 1em;
  position: relative;
  border: none;
  background: transparent;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-block;
  padding: 0 1.3em 0 0;
  text-decoration: none;
  transition: opacity 0.3s;
}
.inlinePlusLink__label {
  border-bottom: 1px solid #3f3c3c;
}
.inlinePlusLink__icon {
  font-size: 0.7em;
  display: block;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 50%;
  transform: translate(-0.3em, -50%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.inlinePlusLink__icon .svgIcon {
  display: block;
}
/* Hover */
.inlinePlusLink:hover {
  opacity: 0.7;
}
.inlinePlusLink:hover .inlinePlusLink__icon {
  transform: translate(0em, -50%);
}
/*  LINK WITH IMAGE ON TOP
    Lien avec grosse icone au-dessus. */
.linkWImg {
  display: block;
  font-size: 1em;
  line-height: 1.15;
  color: #695e49;
  text-align: center;
  width: 100%;
  transition: opacity 0.3s;
  padding-bottom: 1em;
  text-decoration: none;
}
.linkWImg__img {
  margin: 0 1em;
  transition: transform 0.3s;
}
.linkWImg__img img {
  height: 160px;
  width: auto;
  margin-right: auto;
  margin-left: auto;
}
.linkWImg__label {
  font-size: 1.6em;
  font-weight: 600;
  margin-top: 0.6em;
}
.linkWImg__label small {
  font-size: 0.6em;
  font-weight: 400;
  display: block;
}
/* Hover */
.linkWImg:hover {
  opacity: 0.7;
}
.linkWImg:hover .linkWImg__img {
  transform: scale(1.05);
}
/* Buttons */
/*  HEADER AND MENU ......................................................... */
/*  TOP BAR
    Top bar with logo, main nav and second nav.
    TODO : Attention au probleme d'overscroll sur Safari quand on a une zone de slide. */
/* Topbar wrap */
.topBar {
  position: fixed;
  z-index: 9999998;
  width: auto;
  height: 8em;
  background: #fff;
  line-height: 1;
  transition: height 0.4s;
  top: 0;
  left: 0;
  right: 0;
}
.topBar::before {
  position: absolute;
  display: block;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0 0 1em 0 black;
  opacity: 0;
  transition: opacity 0.4s 0s;
}
.topBar__in {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  align-items: flex-end;
  background: #fff;
}
/* Logo */
.topBar__logo {
  display: block;
  flex: 1 1 auto;
  text-align: center;
}
.topBar__logo a {
  color: #695e4a;
  display: inline-block;
  transition: transform 0.4s, margin 0.4s, padding 0.4s;
  transform-origin: 50% 100%;
  background: #fff;
  padding: 0 0 0 0;
  margin-bottom: 18px;
}
.topBar__logo .svgIcon {
  display: block;
  transition: opacity 0.4s ease;
}
.topBar__logo a:hover .svgIcon {
  opacity: 0.7;
}
/* Main nav wrap */
.topBar__sSlide {
  display: block;
  flex: 0 0 auto;
  margin-left: 1em;
  visibility: visible;
}
.topBar__navMain {
  border-top: 1px solid #cbcbca;
}
/* Second nav */
.topBar__navSecond {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
}
/* Mobile toggle icon */
.topBar__toggle {
  display: none;
}
.hamburger {
  font-size: 2em;
  padding: 0.5em;
  display: block;
  box-sizing: content-box;
}
.hamburger:hover {
  cursor: pointer;
  background-color: #fff;
}
.hamburger__line {
  width: 35px;
  height: 3px;
  background-color: #695f4b;
  display: block;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 52%;
}
.hamburger__line:nth-child(2) {
  margin: 6px auto;
}
/* Search icon */
.topBar__searchMobile {
  display: none;
}
/* Main nav styles, pas BEM pour que ca soit facile de creer le HTML. */
.navMain {
  font-size: 1.35em;
  text-transform: uppercase;
}
.navMain ul {
  list-style: none;
  margin: 0 -1.1em;
}
.navMain li {
  display: inline-block;
}
.navMain a {
  display: block;
  position: relative;
  padding: 1.26em 1.3em;
  color: #695e4a;
  transition: color 0.3s, padding 0.4s;
  white-space: nowrap;
}
/* Sub nav */
.navMain ul ul {
  display: none;
  font-size: 0.6em;
  text-transform: none;
  padding-bottom: 2vh;
}
.navMain ul ul a {
  padding-top: 1vh;
  padding-bottom: 1vh;
  white-space: normal;
}
/* Faire concorder avec le media query du mobile menu */
@media (min-width: 992px) {
  .navMain ul ul {
    display: none !important;
  }
}
/* Hover */
.navMain a:hover,
.navMain a.on {
  color: #000;
}
/* Active link */
/* Second nav styles, pas BEM pour que ca soit facile de creer le HTML. */
.navSecond {
  font-size: 0.9em;
  padding: 1em 0;
  transition: padding 0.4s;
}
.navSecond ul {
  list-style: none;
}
.navSecond li {
  display: inline-block;
  vertical-align: middle;
}
.navSecond a {
  display: block;
  padding: 0 0.6em;
  transition: color 0.3s;
}
/* Hover */
.navSecond a:hover {
  color: #000;
}
/* Particular styles for links */
.navSecond__search {
  position: relative;
}
.navSecond__search a {
  color: #695f4b;
  position: relative;
  z-index: 2;
}
.navSecond__search .svgIcon {
  font-size: 1.5em;
}
.navSecond__search .form-control {
  background-color: #ffffff;
  color: #333;
  font-size: 15px;
  border: 1px solid #999;
  transition: all 500ms ease-out;
  z-index: 1005;
  font-size: 16px;
  height: auto;
  opacity: 1;
  width: 250px;
  margin: 15px 0 30px 15px;
  padding: 10px 40px 10px 10px;
}
/*@media (min-width: 992px) {*/
.navSecond__search .form-control {
  opacity: 0;
  width: 0;
  position: absolute;
  top: -10px;
  right: 0;
  display: inline-block;
  margin: 0;
  z-index: 1;
}
.open-search-field .form-control {
  width: 350px;
  opacity: 1;
}
/*}*/
@media (max-width: 991px) {
  .navSecond__search .svgIcon {
    font-size: 1.5em;
  }
  .navSecond__search .form-control {
    opacity: 0;
    width: 0;
    position: absolute;
    top: -10px;
    left: -10px;
    display: inline-block;
    margin: 0;
    z-index: 1;
    padding-right: 10px;
    padding-left: 40px;
  }
  .open-search-field .form-control {
    width: 250px;
    opacity: 1;
  }
}
/* Blog Wordpress */
.site .open-search-field {
  width: 350px;
}
@media (min-width: 991px) {
  .site .open-search-field .svgIcon {
    float: right;
  }
}
/*  TOPBAR "IS SCROLLED"
        Reduire la hauteur du topBar. */
.topBar.isScrolled::before {
  opacity: 0.2;
  transition-delay: 0.3s;
}
/* Trucs qui changent uniquement sur desktop. */
@media (min-width: 992px) {
  .topBar.isScrolled {
    height: 6em;
  }
  .topBar.isScrolled .topBar__logo a {
    transform: scale(0.8);
    margin-bottom: 10px;
  }
  .topBar.isScrolled .navMain a {
    padding-top: 0.7em;
    padding-bottom: 0.8em;
  }
  .topBar.isScrolled .navSecond {
    padding-top: 0.65em;
    padding-bottom: 0.5em;
  }
}
/* Ajustements sur topBar desktop. */
@media (max-width: 1199px) {
  .topBar__logo {
    text-align: left;
  }
  .navMain ul {
    margin-left: calc(-10.2vw + 4em);
    margin-right: calc(-10.2vw + 4em);
  }
  .navMain a {
    padding-left: calc(10.2vw - 4em);
    padding-right: calc(10.2vw - 4em);
  }
}
/* MOBILE menu a partir de iPad portrait */
@media (max-width: 991px) {
  .topBar {
    height: 4em;
  }
  .topBar__in {
    position: static;
    align-items: flex-start;
    width: 99%;
  }
  .topBar__searchMobile {
    display: block;
    flex: 0 0 auto;
    position: relative;
    z-index: 4;
    margin: 20px 10px;
  }
  .topBar__logo {
    flex: 1 1 auto;
    text-align: center;
    position: relative;
    z-index: 3;
    font-size: 0.8em;
  }
  .topBar__logo a {
    padding: 0.1em 0.2em 0.15em 0.3em;
    margin-bottom: 0;
    transform-origin: 50% 0%;
  }
  .topBar__navMain {
    border-top: 0;
  }
  .topBar__navSecond {
    position: static;
    padding: 0;
  }
  .topBar__toggle {
    display: block;
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
  }
  .topBar__sSlide {
    position: absolute;
    z-index: 1;
    color: #000;
    background: #fff;
    left: 0;
    width: 100vw;
    top: -101vh;
    height: 100vh;
    margin: 0;
    transform: translate3d(0, 0vh, 0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .topBar__sSlideIn {
    padding: 9em 5vw 5vh 5vw;
    padding-top: calc(4em + 12vh);
    height: 100vh;
    overflow: auto;
    position: relative;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .navMain {
    font-size: calc(1.5em + 1vw);
    margin: 0 auto 5vh auto;
    max-width: 22rem;
  }
  .navMain ul {
    margin: 0;
  }
  .navMain li {
    display: block;
  }
  .navMain a {
    padding: 2vh 2vw;
  }
  .navMain li.hasChildren > a {
    position: relative;
  }
  .navMain li.hasChildren > a::after {
    position: absolute;
    display: block;
    content: "";
    top: 50%;
    right: 2vw;
    width: 1em;
    height: 1em;
    background-image: url(../../img/icons/icon-arrow-subnav.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100%;
    transform: translateY(-50%) rotate(-90deg);
    transition: transform 0.3s ease;
  }
  /* Sub nav ON. SlideUp et slideDown fait en JS. */
  .navMain li.hasChildren.on > a::after {
    transform: translateY(-50%);
  }
  .navSecond {
    margin: 0 auto;
    max-width: 22rem;
  }
  .navSecond a {
    padding: 1vh 2vw;
    margin-right: 0em;
  }
  .navSecond .navSecond__search {
    display: none;
  }
  /*  TOPBAR ON
            Show the mobile menu.
            Hamburger icon transforms to "x" on click. */
  .topBar.on .topBar__sSlide {
    transform: translate3d(0, 101vh, 0);
  }
  .topBar.on .topBar__sSlideIn {
    opacity: 1;
    transition-delay: 0.3s;
  }
  .topBar.on .hamburger__line {
    background-color: #000;
  }
  .topBar.on .hamburger__line:nth-child(2) {
    opacity: 0;
  }
  .topBar.on .hamburger__line:nth-child(1) {
    transform: translateY(0.3em) rotate(45deg);
  }
  .topBar.on .hamburger__line:nth-child(3) {
    transform: translateY(-0.3em) rotate(-45deg);
  }
  /*  TOPBAR "IS SCROLLED"
            Reduire la hauteur du topBar. */
  .topBar.isScrolled .topBar__logo a {
    transform: scale(0.57);
    padding-bottom: 0;
  }
}
/* Petit mobile, ajustements. */
@media (max-width: 349px) {
  .topBar__logo {
    font-size: 0.65em;
  }
  .topBar.isScrolled .topBar__logo a {
    transform: scale(0.7);
  }
}
/*  FOOTER .................................................................. */
/*  FOOTER
   Footer with RS, search input, info box, list of links, logo, copy text. */
.footer {
  /* margin-top: 2em; overflow: hidden; */
}
.sFooterRSSearch {
  /* background-color: var(--color-rose); */
  text-align: center;
}
.sFooterRSSearch__in {
  padding: 10px 25px;
  margin: 0 auto;
  display: inline-block;
}
.sFooterRSSearch__rs {
  display: inline-block;
  vertical-align: middle;
  margin-top: 25px;
}
.sFooterRSSearch__rs li {
  padding-right: 10px;
}
.sFooterRSSearch__rs li a {
  color: var(--color-primary) !important;
}
.sFooterMain {
  position: relative;
  z-index: 2;
  padding: 22vw 0 40px 0;
  background: url(/img/graphic-vallons-bleu_vert.png) no-repeat, url(/img/fond-vert.png) no-repeat;
  background-size: 100% auto, auto;
  background-position: center 70px, center 300px;
  /* background-color: var(--color-primary); */
}
@media (max-width: 576px) {
  .sFooterMain {
    background-position: center 70px, center 200px;
  }
}
.sFooterMain__in {
  display: flex;
  align-items: flex-start;
}
.footerInfoBox {
  flex: 0 0 auto;
  width: 32%;
  position: relative;
  /*transform: translateY(-4em);*/
}
.footerInfoBox__in {
  /*background-color: var(--color-rose);*/
  padding: 3em 2.5em 3em 3.5em;
}
.footerInfoBox * + p {
  margin-top: 1em;
}
.footerPhones {
  font-size: 1.5em;
  line-height: 1.3;
  margin: 1em 0;
}
.footerPhones a {
  color: #fff;
  text-decoration: none;
}
.footerPastille {
  background: url(/img/pastilles/pastille-tourisme-bleu.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: -220px;
  left: 30px;
  width: 250px;
  height: 250px;
}
html:lang(en) .footerPastille {
  background-image: url(/img/pastilles/pastille-tourisme-bleu-en.svg);
}
.jsAnimateRC.willAnimate .footerPastille {
  transform: translate3d(0, 2em, 0) rotate(10deg);
  opacity: 0;
}
.jsAnimateRC .footerPastille {
  transform: translate3d(0, 0, 0) rotate(0);
  opacity: 1;
  transition: all 500ms ease-out;
  transition-delay: 0.3s;
}
.footerNav {
  flex: 1 1 auto;
  display: flex;
  margin-left: 2em;
  margin-right: -1em;
  padding: 1.5em 0 3em 0;
  font-size: 0.9em;
}
.footerNav__col {
  flex: 1 1 auto;
  width: 25%;
  padding: 0 1em;
  margin-top: 2em;
}
.footerNav__title {
  font-size: 1em;
  font-weight: inherit;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
}
.footerNav__title--lang {
  margin-top: 2.5em;
}
.sFooterCopy {
  display: flex;
  align-items: flex-end;
  position: relative;
  z-index: 3;
}
.sFooterCopy__logo {
  background-color: #fff;
  flex: 0 0 auto;
  width: 32%;
}
.sFooterCopy__logoIn {
  padding: 1.2em 15%;
  max-width: 450px;
  margin: 0 auto;
}
.sFooterCopy__txt {
  flex: 1 1 auto;
  font-size: 0.75em;
  text-align: right;
  margin: 1.3em 1em;
}
/* 2 cols pour les liens. */
@media (max-width: 1099px) {
  .sFooterRSSearch__in {
    margin-left: 21em;
  }
  .footerInfoBox {
    width: auto;
  }
  .footerNav {
    flex-wrap: wrap;
    padding-top: 1.5em;
  }
  .footerNav__col {
    width: 50%;
  }
  .sFooterCopy__logo {
    width: 21em;
  }
}
/* Tablet : 4 cols links. */
@media (max-width: 991px) {
  .sFooterRSSearch__in {
    margin-bottom: 2em;
  }
  .sFooterRSSearch__rs {
    display: block;
    margin: 0.5em 0 0 0;
  }
  .sFooterRSSearch__search {
    display: block;
    margin-top: 1em;
    width: 100%;
  }
  .sFooterMain__in {
    display: block;
  }
  .footerInfoBox {
    text-align: center;
  }
  .footerNav {
    flex-wrap: nowrap;
    margin: 0 0 0 -1em;
    width: auto;
  }
  .footerNav__col {
    width: auto;
  }
  .footerNav__col:last-child {
    padding-right: 0;
  }
  .sFooterCopy__txt {
    text-align: center;
    font-size: 0.75em;
    margin: 1.5em 0;
  }
}
/* Mobile : tout sur une seule colonne. */
@media (max-width: 767px) {
  .footer__hiddenMobile {
    display: none;
  }
  .sFooterRSSearch {
    margin-bottom: 2em;
  }
  .sFooterRSSearch__in {
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .sFooterMain {
    padding-bottom: 3em;
  }
  .footerInfoBox {
    width: 100%;
  }
  .footerInfoBox__in {
    padding: 120px 8vw 20px 12vw;
  }
  .footerPastille {
    top: -150px;
  }
  .footerNav {
    display: block;
    margin: 3em 0 0 0;
    padding-top: 0;
    text-align: center;
  }
  .footerNav__col {
    padding: 0;
    margin-top: 1em;
  }
  .sFooterCopy {
    display: block;
  }
  .sFooterCopy__logo {
    margin-top: 0;
    width: 100%;
  }
}
@media (max-width: 576px) {
  .footerInfoBox__in {
    padding: 170px 8vw 20px 12vw;
  }
  .footerPastille {
    top: 0px;
    left: 0;
    width: 150px;
    height: 150px;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate .sFooterRSSearch {
    opacity: 0;
  }
  .jsAnimateRC .sFooterRSSearch {
    opacity: 1;
    transition: opacity 1s;
  }
  .jsAnimateRC.willAnimate .footerInfoBox__in {
    /*transform: translate3d(-100%,0,0);*/
    opacity: 0;
  }
  .jsAnimateRC .footerInfoBox__in {
    /*transform: translate3d(0,0,0);*/
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
  .jsAnimateRC.willAnimate .footerNav {
    opacity: 0;
  }
  .jsAnimateRC .footerNav {
    opacity: 1;
    transition: opacity 1s 0.3s;
  }
  .jsAnimateRC.willAnimate .sFooterCopy {
    opacity: 0;
  }
  .jsAnimateRC .sFooterCopy {
    opacity: 1;
    transition: opacity 1s 0.6s;
  }
}
.blog ul.rs li {
  margin-right: 15px;
}
/* Header and footer */
/*  PAGE HEADERS ............................................................ */
/*  PAGE HEAD
    La section en haut de page.
    Contient une image en background (parallax), des fois un carousel. */
.pageHead {
  position: relative;
  background-color: #000;
  height: 75vh;
  max-height: 80em;
}
.pageHead__c {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  max-width: 850px;
}
.pageHead__c h1 {
  font-size: 6em;
}
@media (max-width: 600px) {
  .pageHead__c h1 {
    font-size: clamp(32px, 14vw, 6em);
  }
}
.pageHead__cEnchanteBox {
  position: absolute;
  z-index: 12;
  left: 0;
  right: 0;
  bottom: -8em;
  text-align: center;
  height: 0;
}
.pageHead__cEnchanteBoxIn {
  margin-left: auto;
  width: 100%;
  max-width: 32em;
  transform: translateY(-100%);
}
.pageHead__bg {
  overflow: hidden;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
/* .pageHead__bgIn {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; width: auto; } */
.pageHead__bgIn {
  height: 100%;
  width: 100%;
  position: relative;
}
.pageHead__bgIn::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%;
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#4d000000', GradientType=0);
  /* IE6-9 */
}
/* Quand on veut mettre du texte ou bouton par-dessus les images du slider */
.pageHead__hoverIMG {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
  text-align: center;
}
@media (max-width: 768px) {
  .pageHead__hoverIMG {
    transform: scale(0.7) translateX(-75%) translateY(-80%);
    transform-origin: center center;
  }
}
.pageHead__hoverIMG img {
  display: inline-block;
}
.pageHead__hoverIMG--align-bottom-right {
  bottom: 13vw;
  right: 2%;
  top: auto;
  left: auto;
  transform: none;
}
@media (max-width: 768px) {
  .pageHead__hoverIMG--align-bottom-right {
    bottom: 16vw;
  }
}
.pageHead__bgImg {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* FIX POUR IE11 */
.pageHead::after {
  content: " ";
  min-height: inherit;
}
/* Box enchante centre et contenu en-dessous. Linked to .sIntroHome. */
@media (max-width: 991px) {
  .pageHead__cEnchanteBox {
    bottom: -6em;
  }
  .pageHead__cEnchanteBoxIn {
    margin-left: auto;
    margin-right: auto;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate .pageHead__cEnchanteBox {
    transform: translate3d(4vw, 0, 0);
    opacity: 0;
  }
  .jsAnimateRC .pageHead__cEnchanteBox {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
  .jsAnimateRC.willAnimate .pageHead__c {
    opacity: 0;
  }
  .jsAnimateRC .pageHead__c {
    opacity: 1;
    transition: opacity 1s;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .jsAnimateRC.willAnimate .pageHead__cEnchanteBox {
    transform: translate3d(0, 4vw, 0);
    opacity: 0;
  }
}
/* Video dans le pageHead */
.pageHead.pageHead__avec-video {
  height: 55vw;
  max-height: none;
}
@media (max-width: 768px) {
  .pageHead.pageHead__avec-video {
    height: 50vh;
  }
}
.pageHead__video {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  top: 0;
  left: 0;
  background: #fff url(/images/loader.gif) no-repeat center center;
}
.pageHead__video video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: auto;
  /* width: auto; height: auto; */
  z-index: -500;
  overflow: hidden;
}
@media (max-width: 768px) {
  .pageHead__video video {
    width: 280%;
  }
}
/*@media (min-width: 1900px) {
         .pageHead__video video {
            height: 120%;
         }
      }*/
/*	BOX
		Search box et reseaux sociaux sur l'accueil. */
.enchanteBox__enchanteLogo {
  font-size: 7.5em;
  line-height: 1;
  margin: 0 auto;
}
.enchanteBox__enchanteTagLine {
  font-size: 1.5em;
  margin: -1.1em 0 1em 0;
}
.enchanteBox__SRS {
  background-color: #877e6f;
  padding: 2.5em 2.5em 2em 2.5em;
  margin: 0 4em;
  position: relative;
  z-index: 2;
}
.enchanteBox__SRS .rs {
  margin-top: 0.6em;
}
/* Faire fitter sur mobile */
@media (max-width: 767px) {
  .enchanteBox__enchanteLogo {
    font-size: 4.5em;
  }
  .enchanteBox__enchanteTagLine {
    font-size: 1.1em;
  }
  .enchanteBox__SRS {
    margin: 0;
    padding: 8vw 8vw 6vw 8vw;
  }
}
/* Modèle de page avec entete plus petit, fond de couleur seulement, sans photo */
.pageHead--noimg {
  position: relative;
  background-color: var(--color-bleu);
  height: 35vh;
  max-height: 250px;
  margin-bottom: 3em;
}
@media (max-width: 991px) {
  .pageHead--noimg {
    margin-top: 2em;
  }
}
.pageHead--noimg h1 {
  text-shadow: none;
}
/* Page headers at top of page */
/*  SITE STYLES ............................................................. */
/*  SECTION STANDARD STYLES
    Styles standard de section principale.
    Un style par defaut de header de section est egalement disponible. */
.sMain {
  padding-top: 6em;
  padding-bottom: 6em;
}
.sHead {
  margin-bottom: 5em;
  text-align: center;
}
/* 	ALT :
        No double padding.
        Si 2 sections avec cette classe se chevauchent, ne pas mettre
        d'espacement entre ces 2 sections. */
.sMain--noDP + .sMain--noDP {
  padding-top: 0;
}
/*  ALT :
        No padding top or bottom. */
.sMain--noPT {
  padding-top: 0;
}
.sMain--noPB {
  padding-bottom: 0;
}
/*  ALT :
        With background-color. */
.sMain--addBGC {
  background-color: var(--color-rose-tres-pale);
  /* background-color: #f0efed; */
}
/*  DEFAULT ANIMATION :
        Uniquement afficher la section en fade. */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate.sMain--defaultAnimation {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC.sMain--defaultAnimation {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
}
/* Mobile, plus petit espace entre les sections. */
@media (max-width: 767px) {
  .sMain {
    padding-top: 4em;
    padding-bottom: 4em;
  }
  .sHead {
    margin-bottom: 2.5em;
  }
}
/*  SOCIAL NETWORKS
    Liens vers reseaux sociaux, cote a cote. */
ul.rs {
  list-style: none;
  font-size: 2.5em;
  line-height: 1;
  padding-left: 0;
}
ul.rs li {
  display: inline-block;
  margin-bottom: 0;
  padding-left: 0;
}
ul.rs li:not(:first-child) {
  margin-left: -0.15em;
}
ul.rs li a {
  color: #fff;
  background: var(--color-bleu);
  border-radius: 50%;
  padding: 0;
  text-decoration: none;
  display: block;
  height: 1em;
  box-sizing: content-box;
  transition: opacity 0.3s;
}
ul.rs li a:hover {
  opacity: 0.7;
}
/* On dark */
.onDark ul.rs li a {
  color: #867d6e;
  background-color: #fff;
}
/*  IMAGE LINK BLOCK
    Image link with icon, image, content in top (or bottom). */
.imgLink {
  line-height: 1;
  text-decoration: none;
  display: block;
  position: relative;
  text-align: center;
}
/* Section du haut avec image et pourrait avoir contenu. */
.imgLink__top {
  position: relative;
  background-color: #f0f0f0;
  display: block;
}
.imgLink__topCtn {
  padding: 7em 5vw 1em 5vw;
}
.imgLink__topCtn * + h3 {
  margin-top: 0.5em;
}
/* Icone. */
.imgLink__iconBox {
  font-size: 7em;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
}
.imgLink__iconBox .svgIcon {
  font-size: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}
/* Image de fond de la section du haut. */
.imgLink__bg {
  overflow: hidden;
}
.imgLink__bg img {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: relative;
  z-index: 1;
}
/* Section du bas. */
.imgLink__bottom {
  padding: 0.8em 1.5em 0 1.5em;
  font-size: 1.1em;
  line-height: 1.4;
  color: var(--color-primary);
  /*font-weight: 600;*/
}
.imgLink__bottom--brown {
  text-transform: uppercase;
  color: #695e49;
}
/* Hover, uniquement si c'est un lien. */
a .imgLink__iconBox {
  transition: opacity 0.3s;
}
a:hover .imgLink__iconBox {
  opacity: 0.7;
}
a .imgLink__bg img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover .imgLink__bg img {
  transform: scale(1.05);
}
/* Moins de padding sur le bottom sur iPad et moins. */
@media (max-width: 991px) {
  .imgLink__bottom {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}
/* Font-size normal sinon ca break sur trop de lignes sur mobile */
@media (max-width: 767px) {
  .imgLink__bottom {
    font-size: 1em;
  }
}
/*  COLS
    Colonnes flex reutilisables pour le site.
    Gauche : flex ajustable.
    Droite : flex fixe.
    .cFlex { }
    .cFlex__l {margin-bottom: 2em;}
    .cFlex__r { }

    @media (min-width: 768px) {
        .cFlex {display: flex;width: 100%;}
        .cFlex__l {flex: 1 1 auto;margin-bottom: 0;margin-right: 5vw;}
        .cFlex__r {flex: 0 0 auto;}
    }



/*  LAYOUT COLS
    3 cols layout.
    .c3 { }
    .c3__col { }
    * + .c3__col {margin-top: 5em; }

    @media (min-width:992px) {
        .c3 {display: flex; justify-content: space-between; }
        .c3__col {display: block; flex: 0 0 auto; width: 29%; margin-top: 0; }
    }



/*  NAV ARROWS
    Arrows in a carousel navigation.
    Par default = horizontal.
    ALT = vertical. */
.navArrows {
  position: relative;
}
.navArrows .btnIcon {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-100%, 200%);
  /*top: 40%;transform: translate(-100%, -50%);*/
}
.navArrows .btnIcon + .btnIcon {
  left: auto;
  right: 0;
  transform: translate(100%, 200%);
  /*transform: translate(100%, -50%);*/
}
/*  SECTION FULL BG IMAGE AVEC FLOATING BOX
    Image en full BG (desktop) et floating box avec texte.
    Utile dans home. */
.sFullBGWithCtn {
  position: relative;
  background-color: #000;
}
.sFullBGWithCtn__in {
  overflow: hidden;
  position: relative;
}
.sFullBGWithCtn__img {
  margin: 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
  max-height: 36em;
}
.sFullBGWithCtn__img img {
  margin: -10vw 0;
}
.sFullBGWithCtn__imgMB {
  display: none;
}
.sFullBGWithCtn__imgDT {
  display: block;
}
.sFullBGWithCtn__ctn {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 90%;
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}
.sFullBGWithCtn__cta {
  margin-top: 2em;
  font-size: 1.125em;
}
/* Badge Enchance positionnement */
.sFullBGWithCtn .sFullBGWithCtn__badgeEnchante {
  position: absolute;
  z-index: 3;
  display: block;
  left: 50%;
  top: -0.4em;
  transform: translateX(-50%);
}
.sFullBGWithCtn__badgeEnchante + .sFullBGWithCtn__in > .sFullBGWithCtn__ctn {
  margin-top: 3em;
}
/* Badge rapetisse sur iPad et - */
@media (max-width: 992px) {
  .sFullBGWithCtn .sFullBGWithCtn__badgeEnchante {
    font-size: calc(0.5em + 5vw);
  }
}
/* Shade par-dessus l'image (optionnelle) */
/*.sFullBGWithCtn__addShade::before {position: absolute;z-index: 2;display: block;content: '';top: 0;left: 0;right: 0;height: 40%;background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%);}
    .sFullBGWithCtn__addShade::after {position: absolute;z-index: 2;display: block;content: '';bottom: 0;left: 0;right: 0;height: 40%;background: linear-gradient(to top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%);}*/
.sFullBGWithCtn__cta .btn {
  margin: 0.2em;
}
/* Mobile : no parallax image and use a lightweight image. */
@media (max-width: 767px) {
  .sFullBGWithCtn__img img {
    margin: 0;
  }
  .sFullBGWithCtn__imgMB {
    display: block;
  }
  .sFullBGWithCtn__imgDT {
    display: none;
  }
  .sFullBGWithCtn__cta {
    font-size: 0.875em;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate .sFullBGWithCtn__ctn {
    opacity: 0;
  }
  .jsAnimateRC .sFullBGWithCtn__ctn {
    opacity: 1;
    transition: opacity 1s;
  }
}
/*  SECTION "LISTE D'ITEMS".
   Liste d'articles, d'images ou de liens dans un carousel.
   Option de ne pas etre dans un carousel. */
.sListItems__in {
  position: relative;
}
.sListItems__list {
  margin: 0 -0.4em;
}
.sListItems .imgLink {
  margin: 0 0.4em;
}
.sListItems .slidesToShow2 .imgLink {
  margin: 0 50px;
}
/*  ALT :
      Pas dans un carousel JS, juste les afficher un apres l'autre. */
.sListItems__list--noCarousel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: -2em;
}
.sListItems__list--noCarousel .imgLink {
  width: calc(33.3% - 0.8em);
  flex: 0 0 auto;
  margin: 0 0.4em 3em 0.4em;
}
/* Si on modifie ici, changer aussi le JS Slick carousel, section responsive. */
@media (max-width: 1099px) {
  /* 2 cols */
  .sListItems__list--noCarousel .imgLink {
    width: calc(50% - 0.8em);
  }
}
@media (max-width: 649px) {
  /* 1 col */
  .sListItems__list--noCarousel .imgLink {
    width: calc(100% - 0.8em);
  }
}
/*  ALT :
   Ajout d'un BG color, avec marge blanche en haut. */
.sListItems--withBG {
  background-color: var(--color-rose-tres-pale);
  /* background-color: #f0efed; */
}
.categorie-root .sListItems--withBG {
  background-color: #fff;
}
/* Les arrows depasse et cree un scroll bar, donc reduire la largeur de la zone. */
@media (max-width: 991px) {
  .sListItems {
    padding-left: 2.2em;
    padding-right: 2.2em;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate .sListItems__in {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC .sListItems__in {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
}
/* Bouton off quand on arrive a la fin du carroussel slick */
.slick-disabled {
  opacity: 0.35;
}
/* On n'affiche pas le header du include sur les pages d,accueil des categories */
.categorie-root header {
  display: none;
}
/*  SECTION "INTRO HOME"
   Section d'introduction avec graphic-vallons */
.sIntroHome {
  padding: 270px 0 150px 0;
  margin-top: -13vw;
  color: #fff;
  position: relative;
  z-index: 100;
  background: url(/img/graphic-vallons-jaune-rose-squeeze.png) no-repeat, url(/img/fond-vert.png) no-repeat;
  /* background: url(/img/graphic-vallons-jaune-rose.png) no-repeat center top, linear-gradient(to bottom, rgba(23,63,53,0) 0%, rgba(23,63,53,0) 20%, rgba(23,63,53,1) 20%, rgba(23,63,53,1) 100%); */
  background-size: 100% auto, auto;
  background-position: center top, center 250px;
}
@media (max-width: 500px) {
  .sIntroHome {
    background-position: center top, center 150px;
  }
}
.sIntroHome__in {
  position: relative;
  z-index: 13;
  width: 70%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
}
.sIntroHome .sIntroHome-pastille {
  flex: 0 0 auto;
  width: 250px;
  text-align: left;
}
.sIntroHome .sIntroHome-pastille img {
  display: block;
  height: auto;
  max-width: 90%;
  margin-top: -50px;
}
.sIntroHome__content {
  flex: 1;
}
@media (max-width: 1250px) {
  .sIntroHome {
    padding-top: 250px;
  }
  .sIntroHome__in {
    width: 90%;
  }
}
@media (max-width: 991px) {
  .sIntroHome {
    padding-top: 120px;
  }
  .sIntroHome .sIntroHome__content {
    padding-top: 50px;
  }
}
@media (max-width: 768px) {
  .sIntroHome__in {
    width: auto;
    padding: 0 30px;
    flex-direction: column;
  }
  .sIntroHome .sIntroHome__content {
    padding-top: 30px;
  }
}
@media (max-width: 576px) {
  .sIntroHome {
    padding-top: 130px;
  }
}
@media (min-width: 1600px) {
  .sIntroHome {
    background-size: 100% auto, auto;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate .sIntroHome__in {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC .sIntroHome__in {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
}
/*  SECTION "INTRO PAGE"
   Section d'introduction (texte) juste apres pageHead.
   Le milieu de la section overflow dans le pageHead. */
.sIntroPageOF {
  position: relative;
  z-index: 3;
  text-align: center;
  padding-top: 0;
}
.sIntroPageOF-pastille {
  width: 250px;
  height: 250px;
  margin: -125px auto 50px auto;
}
.sIntroPageOF__separator {
  position: relative;
  padding: 0 0 20px 0;
}
.sIntroPageOF__top #titre {
  font-weight: 600;
}
/*.sIntroPageOF__separator::before { 
      content: ""; width: 300px; height: 5px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); background-color: var(--color-bleu); 
   }*/
@media (max-width: 767px) {
  .sIntroPageOF__top {
    padding-left: 8%;
    padding-right: 8%;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate .sIntroPageOF__top {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC .sIntroPageOF__top {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 700ms, opacity 1s;
  }
  .jsAnimateRC.willAnimate .sIntroPageOF__c {
    /*transform: translate3d(0,2em,0);*/
    opacity: 0;
  }
  .jsAnimateRC .sIntroPageOF__c {
    /*transform: translate3d(0,0,0);*/
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
  .jsAnimateRC.willAnimate .sIntroPageOF-pastille {
    transform: translate3d(0, 2em, 0) rotate(10deg);
    opacity: 0;
  }
  .jsAnimateRC .sIntroPageOF-pastille {
    transform: translate3d(0, 0, 0) rotate(0);
    opacity: 1;
    transition: all 500ms ease-out;
    transition-delay: 0.3s;
  }
}
/*  SECTION "PLANIFICATION"
    Section de planification avec plusieurs variantes : liens avec
    grosses images, box Facebook, texte pour planifier le sejour. */
.sPlanification:last-child {
  margin-bottom: 2em;
}
/* Layout standard : 3 cols avec 2 colonnes de liens cliquables avec grosse image. */
.cPlanif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
}
.cPlanif--narrow {
  max-width: 700px;
  /*max-width: 66em;*/
}
* + .cPlanif {
  margin-top: 3em;
}
/* Cols */
.cPlanif__colLink {
  display: block;
  flex: 0 0 auto;
  width: 30%;
  max-width: 18em;
}
.cPlanif__colLink--half {
  width: 50%;
}
.cPlanif__colLink--spL {
  margin-left: 5%;
}
.cPlanif__colLink--spR {
  margin-right: 5%;
}
.cPlanif__colRessources {
  flex: 0 0 auto;
  max-width: 27em;
  padding: 0.5em 0 0.5em 10%;
  border-left: 1px solid #695e4a;
}
.cPlanif__colPlanifiezTxt {
  flex: 0 0 auto;
  width: 32%;
  margin-left: 0;
}
/* Layout avec box Facebook a droite. */
.sPlanifWFB {
  display: flex;
}
.sPlanifWFB__colL {
  display: block;
  flex: 1 1 auto;
}
.sPlanifWFB__colFB {
  display: block;
  flex: 0 0 auto;
  width: 28em;
  padding-left: 4em;
  margin-left: 5em;
  border-left: 1px solid #b4aea4;
}
/* Box "Planifiez votre sejour" */
.bPlanifiez {
  text-align: center;
}
.bPlanifiez .svgIcon {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.bPlanifiez .svgIcon--pastille-tourisme-bleu {
  width: 150px;
  height: 150px;
  display: block;
  margin: 0 auto 10px auto;
}
.bPlanifiez .planifiezTitle + * {
  margin-top: 0.7em;
}
/* 3 cols break into 1 wide + 2 sm cols. */
@media (max-width: 1199px) {
  .cPlanif {
    flex-wrap: wrap;
    align-items: flex-start;
    max-width: 39em;
  }
  /* Cols */
  .cPlanif__colLink {
    width: 50%;
    margin: 0;
  }
  .cPlanif__colRessources {
    width: auto;
    max-width: none;
    margin: 3em auto 0 auto;
    padding: 2em 0 0 0;
    border-left: none;
    border-top: 1px solid #695e4a;
  }
  .cPlanif__colPlanifiezTxt {
    width: 100%;
    max-width: 30em;
    margin: 0 auto 4em auto;
  }
  /* Layout avec box Facebook a droite. */
  .sPlanifWFB {
    display: block;
    text-align: center;
    max-width: 39em;
    margin: 0 auto;
  }
  .sPlanifWFB__colFB {
    display: none;
  }
}
/* 1 col everything. */
@media (max-width: 767px) {
  .cPlanif {
    display: block;
  }
  .cPlanif__colLink {
    margin: 1em auto;
    width: 100%;
  }
}
/* Animate */
@media (min-width: 768px) {
  /* Animate section planification standard, sans le FB box. */
  .jsAnimateRC.willAnimate > .cPlanif > *:nth-child(1) {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC > .cPlanif > *:nth-child(1) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
  .jsAnimateRC.willAnimate > .cPlanif > *:nth-child(2) {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC > .cPlanif > *:nth-child(2) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
  .jsAnimateRC.willAnimate > .cPlanif > *:nth-child(3) {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC > .cPlanif > *:nth-child(3) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.6s;
  }
  /* Animate section planification qui contient la FB box. */
  .jsAnimateRC.willAnimate > .sPlanifWFB .sPlanifWFB__colL {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC > .sPlanifWFB .sPlanifWFB__colL {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
  .jsAnimateRC.willAnimate > .sPlanifWFB .sPlanifWFB__colFB {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC > .sPlanifWFB .sPlanifWFB__colFB {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
  .jsAnimateRC.willAnimate > .sPlanifWFB .cPlanif > *:nth-child(1) {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC > .sPlanifWFB .cPlanif > *:nth-child(1) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.6s;
  }
  .jsAnimateRC.willAnimate > .sPlanifWFB .cPlanif > *:nth-child(2) {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC > .sPlanifWFB .cPlanif > *:nth-child(2) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.9s;
  }
}
/*  SECTION "SEJOUR REUSSI"
    Avec fond pale, texte centered. */
.sSejourReussi {
  background-color: #f0efed;
  text-align: center;
}
.sSejourReussi__in {
  max-width: 50em;
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate .sSejourReussi__in {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC .sSejourReussi__in {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
}
/*  SECTION "LISTE DES INTERVENANTS"
    Liste d'intervenants dans la page de details d'une categorie. */
.sListIntervenants {
  position: relative;
}
.is-cms .sListIntervenants::after {
  content: "Pour gérer les intervenants, connectez-vous au panneau de gestion des intervenants.";
  color: red;
  padding: 50px 0;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}
.sListIntervenants__results {
  padding-bottom: 1.3em;
  line-height: 1;
}
.sListIntervenants__closed {
  border-top: 5px solid #b7b3ac;
  text-align: center;
  font-size: 1.3em;
  line-height: 1.3;
  padding: 2em 0;
  margin-top: 3em;
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate.sListIntervenants__closed {
    transform: translate3d(0, 2rem, 0);
    opacity: 0;
  }
  .jsAnimateRC.sListIntervenants__closed {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
}
.iIntervenant {
  padding: 2.5em 0;
  border-top: 1px solid #e6e6e6;
  display: flex;
}
.iIntervenant:last-child {
  border-bottom: 1px solid #e6e6e6;
}
.iIntervenant__head + * {
  margin-top: 1.5em;
}
.iIntervenant__img {
  display: block;
  flex: 0 0 auto;
  width: 35%;
  margin-right: 4%;
}
.iIntervenant__c {
  flex: 1 1 auto;
  align-self: center;
}
.iIntervenant__phone {
  margin-top: 0;
  font-size: 1.125em;
}
.iIntervenant__btns {
  margin-top: 0.9em;
}
.iIntervenant__btnsStd {
  display: inline-block;
  margin: 0.5em 1em 0.5em -0.2em;
}
.iIntervenant__btnsPictos {
  display: inline-block;
  margin-left: -0.6em;
}
.iIntervenant__btns .btn {
  vertical-align: middle;
  margin: 0.2em;
}
.iIntervenant__btns .btnIcon {
  vertical-align: middle;
  margin: 0.05em;
}
/* Tablette, reduire la grosseur du texte pour que ca affiche
        bien sur une seule ligne (car on veut conserver 2 cols). */
@media (max-width: 991px) {
  .sListIntervenants {
    font-size: 0.9em;
  }
}
/* Mobile, break les colonnes. */
@media (max-width: 767px) {
  .iIntervenant {
    display: block;
  }
  .iIntervenant__img {
    width: auto;
    margin: 0;
    max-width: 555px;
  }
  .iIntervenant__c {
    width: auto;
    margin-top: 1.6em;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate .sListIntervenants__results {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC .sListIntervenants__results {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
  .jsAnimateRC.willAnimate.iIntervenant {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC.iIntervenant {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
}
/*  SECTION "LISTE DE MUNICIPALITES".
    Liste de municipalites dans la page des regions.
    Pas dans un carousel, 2 cols layout. */
.sListMunicipalites__list {
  margin: 0 -2%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -4%;
  justify-content: center;
}
.sListMunicipalites .iMunicipalite {
  margin: 0 2%;
  width: 37%;
  flex: 1 1 auto;
  margin-bottom: 4%;
  max-width: 574px;
}
.iMunicipalite {
  background-color: #fff;
  padding: 1em 1em 0 1em;
  text-align: center;
  box-shadow: 0 0 1.3em rgba(0, 0, 0, 0.1);
}
.iMunicipalite__img {
  position: relative;
  overflow: hidden;
}
.iMunicipalite__img::before {
  content: "";
  display: block;
  padding-top: 67.5%;
}
.iMunicipalite__img a:hover img {
  transform: scale(1.1);
}
.iMunicipalite__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: all 500ms ease-out;
}
.iMunicipalite__c {
  padding: 1.5em 1em 2em 1em;
}
.iMunicipalite__title + * {
  margin-top: 0.75em;
}
/* Tablette, reduire la grosseur du texte pour que ca affiche
        bien sur une seule ligne (car on veut conserver 2 cols). */
@media (max-width: 991px) {
  .sListMunicipalites {
    font-size: 0.9em;
  }
}
/* Mobile, break les colonnes. */
@media (max-width: 767px) {
  .sListMunicipalites__list {
    display: block;
    margin: 0;
  }
  .sListMunicipalites .iMunicipalite {
    width: auto;
    margin: 0 auto;
  }
  .sListMunicipalites .iMunicipalite + .iMunicipalite {
    margin-top: 5vw;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate.iMunicipalite {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC.iMunicipalite {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
}
/*  SECTION "LEFT CONTENT BG BROWN + RIGHT IMAGE"
    Section avec texte sur fond brun et image qui reste a la meme hauteur
    que le texte. */
.sLBRI {
  display: flex;
  background-color: #877e6f;
}
.sLBRI__c {
  text-align: center;
  flex: 0 0 auto;
  align-self: center;
  width: 36%;
  min-width: 20em;
  padding: 2em 3em;
}
.sLBRI__img {
  flex: 1 1 auto;
}
.sLBRI__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Mobile, 1 col. */
@media (max-width: 767px) {
  .sLBRI {
    display: block;
  }
  .sLBRI__c {
    width: auto;
    min-width: 0;
    padding: 6vw 8vw;
  }
  .sLBRI__img img {
    height: auto;
  }
}
/* Animate */
@media (min-width: 768px) {
  .jsAnimateRC.willAnimate.sLBRI {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC.sLBRI {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
  }
  .jsAnimateRC.willAnimate .sLBRI__c {
    transform: translate3d(0, 2em, 0);
    opacity: 0;
  }
  .jsAnimateRC .sLBRI__c {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
}
/*  BADGE ENCHANTE
    Badge "Enchante" par-dessus un bandeau parallax. */
.badgeEnchante {
  font-size: 4.5em;
  position: relative;
  display: inline-block;
}
.badgeEnchante__enchante {
  color: #fff;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0.75em;
}
.badgeEnchante__enchante .svgIcon {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.badgeEnchante__bg {
  font-size: 4.2em;
}
.badgeEnchante__bg .svgIcon {
  display: block;
}
/*  JS SHORTEN
    Styles CSS necessaires au bon fonctionnement du shorten. */
.jsShorten {
  position: relative;
  overflow: hidden;
  /* 1 ligne de haut = font-size * line-height, ici nous voulons 2 lignes de haut */
  line-height: 1.5;
  max-height: 3em;
}
.jsShorten + * {
  margin-top: 1.5em;
}
.jsShorten__plusLink {
  position: absolute;
  top: 1.5em;
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 25%);
  padding-left: 2em;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
.jsShorten__ellipsis {
  margin-right: 0.25em;
}
/*  STATE "ON"
            Le state est on quand le contenu depasse la zone.
            On affiche donc le bouton "Plus". */
.jsShorten.on .jsShorten__plusLink {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
/*  STATE "OPENED"
            Le state est opened quand on clique sur le bouton "Plus"
            pour afficher tout le contenu. */
.jsShorten.opened {
  max-height: none;
}
.jsShorten.opened .jsShorten__plusLink {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s 0.3s;
}
/*  BANDE "CARTE INTERACTIVE" sur page d'accueil
     */
.carteInteractiveHome {
  display: none;
}
@media (min-width: 991px) {
  .carteInteractiveHome {
    display: block;
  }
}
/*  SECTION "EVENEMENTS"
    Calendrier */
.pjIcContainer {
  margin-top: 5em;
}
@media (min-width: 991px) {
  .wStd-calendrier {
    width: 80%;
  }
}
@media (min-width: 1199px) {
  .wStd-calendrier {
    width: 70%;
  }
}
/*  SECTION "CARTE INTERACTIVE" */
.carte-interactive-mobile {
  display: none;
}
@media (max-width: 991px) {
  .carte-interactive-mobile {
    display: block;
    text-align: center;
    padding: 7em 5em 4em 5em;
  }
  #carte-frame {
    display: none;
  }
}
/*  Fancybox  */
.fancybox-container {
  z-index: 10000001 !important;
}
/* Popup fancy box - Custom In animation */
.fancybox-fx-material.fancybox-slide--previous,
.fancybox-fx-material.fancybox-slide--next {
  transform: translateY(-60px) scale(1.1);
  opacity: 0;
}
.fancybox-fx-material.fancybox-slide--current {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Fait disparaitre le close X qui est en double quand on utilise un iframe */
.fancybox-button--close {
  display: none !important;
}
/*  Popup commande du guide  */
#formulaire-popup {
  max-width: 600px;
}
#formulaire-popup .formInput {
  padding: 0.5em;
}
/* Haut de page */
.scrollToTop {
  cursor: pointer;
  position: fixed;
  bottom: 100px;
  right: 0;
  opacity: 1;
  visibility: hidden;
  z-index: 2000;
  transition: all 300ms ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  transform: translate3d(100%, 0, 0);
}
.scrollToTop div {
  padding: 10px 15px;
  background-color: rgba(135, 126, 111, 0.5);
  color: #FFF;
  font-size: 22px;
  transition: all 300ms ease-out;
}
.scrollToTop span {
  display: block;
  width: 30px;
  height: 30px;
  background: url(/img/icons/icon-chevron-top-white.svg) no-repeat left top;
  background-size: cover;
  transition: all 300ms ease-out;
}
.scrollToTop:hover div {
  background-color: #877e6f;
}
.scrollToTop:hover span {
  transform: scale(1.125) !important;
}
@-webkit-keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
}
@keyframes slideOutRight {
  from {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
}
.slideOutRight {
  -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
@-webkit-keyframes slideInRight {
  from {
    transform: translate3d(150%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
@keyframes slideInRight {
  from {
    transform: translate3d(150%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
/* Popup */
#popup,
#popup-container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  font-size: 16px;
  color: #555555;
}
#popup .repeatable,
#popup-container .repeatable {
  background-color: #fff;
  padding: 0;
  border: none;
}
#popup .mfp-close,
#popup-container .mfp-close {
  right: -35px;
  top: -35px;
  color: #fff;
}
@include media("<=sm") {
  right: -15px;
  top: -45px;
}
#popup img,
#popup-container img {
  display: block;
  max-width: 100%;
  height: auto;
}
#popup p,
#popup-container p,
#popup h1,
#popup-container h1,
.is-cms #popup-container p,
.is-cms #popup-container h1 {
  margin-bottom: 20px;
  padding-bottom: 0;
}
#popup .repeatable p:last-child,
#popup-container .repeatable p:last-child {
  margin-bottom: 0;
}
.is-cms .page-popup {
  padding-top: 150px;
}
.is-cms .introduction {
  max-width: 600px;
  text-align: center;
  margin: 50px auto 0 auto;
  font-size: 14px;
  line-height: 18px;
  color: #555555;
}
.is-cms .introduction img {
  max-width: 45px;
  display: inline;
  vertical-align: bottom;
}
.is-cms #popup-container {
  padding: 40px;
  max-width: 680px;
  min-height: 200px;
  margin: 100px auto;
  height: auto;
}
.is-cms #popup-container > div {
  width: 600px;
  margin: 0 auto 60px auto;
  outline: 1px dashed #999;
}
.is-cms #popup-container > div:first-child {
  outline: 5px solid green;
  position: relative;
}
.is-cms #popup-container > div:first-child::before {
  content: "POPUP ACTIF";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  text-align: center;
  color: green;
}
.is-cms .page-popup .repeatable {
  margin-top: 50px;
}
.is-cms .page-popup img {
  width: auto;
  max-width: 100%;
}
#no-popup {
  display: none;
}
.is-cms #no-popup {
  display: block;
}
/* Surreal CMS */
.surreal-cms-message {
  display: none;
}
.is-cms .surreal-cms-message {
  display: block;
  text-align: center;
  padding: 75px;
  color: red;
}
/* Anchor */
/* Marge au-dessus d'un anchor, pour ne pas qu'il soit collé en haut de la fenetre */
h1:target,
h2:target,
h3:target,
h4:target,
h5:target,
div:target,
span:target,
p:target,
table:target,
section:target,
a:target,
article:target {
  position: relative;
  border-top: 100px solid transparent;
  background-clip: padding-box;
}
h1:target::before,
h2:target::before,
h3:target::before,
h4:target::before,
h5:target::before,
div:target::before,
span:target::before,
p:target::before,
table:target::before,
section:target::before,
a:target::before,
article:target::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
}
/*  TITLE OF BLOCK
    Small description pour aider a savoir c'est quoi */
/* Large devices (big desktops, less than 2000px) */
/* Large devices (desktops, less than 1200px) */
/* Medium devices (tablets, less than 992px) */
/* Small devices (landscape phones, less than 768px) */
/* Extra small devices (portrait phones, less than 576px) */
/* CETTE SEMAINE */
.tableau-adaptatif--3colonnes td.tableau-cette-semaine__nom {
  font-size: 0.9em;
  line-height: 1.8em;
}
.tableau-adaptatif--3colonnes td.tableau-cette-semaine__nom strong {
  font-size: 1.3em;
  font-weight: bold;
  color: #877e6f;
  text-transform: uppercase;
}
.tableau-adaptatif--3colonnes td.tableau-cette-semaine__nom .btn {
  font-size: 0.85em;
  padding: 0.5em 1.5em 0.4em 1.5em;
  margin: 0;
}
.tableau-adaptatif--3colonnes td.tableau-cette-semaine__description {
  font-size: 0.95em;
  font-style: italic;
}
.tableau-adaptatif--3colonnes td.tableau-cette-semaine__ouverture {
  font-size: 0.95em;
  color: #67a237;
}
@media (min-width: 768px) {
  .tableau-adaptatif--3colonnes td.tableau-cette-semaine__nom {
    width: 37%;
  }
  .tableau-adaptatif--3colonnes td.tableau-cette-semaine__description {
    width: 37%;
  }
  .tableau-adaptatif--3colonnes td.tableau-cette-semaine__ouverture {
    width: 26%;
    padding-left: 30px;
  }
}
/*.tableau-cette-semaine__nom p {
    background-color: #877e6f; padding: 10px; margin: 10px; color: #fff;
}*/
/* Articles du blog */
.blog .site-content,
.wp-singular .site-content {
  padding-top: 130px;
}
@media (max-width: 991px) {
  .blog .site-content,
  .wp-singular .site-content {
    padding: 80px 20px 0 20px;
  }
}
.home .site-main,
.home .sMain,
.wp-singular .site-main,
.wp-singular .sMain {
  padding: 0;
}
.wp-singular .content-area,
.archive .content-area,
.wp-singular .sidebar,
.archive .sidebar,
body:not(.search-results) article:not(.type-page) .entry-content {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  float: none;
  padding: 0;
}
.wp-singular .widget_categories ul,
.archive .widget_categories ul {
  margin-left: 17px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  float: none;
  line-height: 1.5;
}
.wp-singular .post-thumbnail {
  margin: 0;
}
.wp-singular .sIntroPageOF__top {
  padding: 70px 0 80px 0;
}
.blog h1,
.wp-singular h1,
.archive h1 {
  text-shadow: none;
  color: var(--color-secondary);
}
.blog.home h1 {
  color: #fff;
}
.wp-singular .entry-content a {
  box-shadow: none;
}
.wp-singular .entry-content p {
  margin: 0 0 1.5em 0;
}
.archive .page-header {
  border-top: none;
  margin-bottom: 0;
  padding-top: 100px;
}
.wp-singular .sidebar,
.archive .sidebar {
  margin-bottom: 3em;
}
.blog .pagination,
.archive .pagination {
  width: 100%;
}
/* Moteur de recherche Site search 360 */
.ss360-fullscreen-layer {
  background-color: #ffffff !important;
  z-index: 22999998 !important;
}
.ss360-fullscreen-layer__heading {
  text-shadow: none;
  font-size: 2.8em;
  margin-top: 0;
  color: #695e4a;
  /*margin-top: 150px;*/
}
.ss360-fullscreen-layer__heading::before {
  content: "";
  width: 180px;
  height: 100px;
  display: block;
  margin: 0 auto 25px auto;
  background: url(/img/logo-tourisme-coaticook.svg) no-repeat center center;
  background-size: contain;
}
#ss360-custom-searchbox::-webkit-input-placeholder {
  color: #fff !important;
}
#ss360-custom-searchbox::-moz-placeholder {
  color: #fff !important;
}
#ss360-custom-searchbox:-ms-input-placeholder {
  color: #fff !important;
}
#ss360-custom-searchbox::-ms-input-placeholder {
  color: #fff !important;
}
#ss360-custom-searchbox::placeholder {
  color: #fff !important;
}
.ss360-layer__heading {
  text-shadow: none;
}
.ss360-suggests__image-wrap {
  min-width: 150px !important;
  width: 150px !important;
}
.search-fake-input {
  border: 1px solid #fff;
  padding: 5px 10px;
  cursor: pointer;
  text-align: left;
}
.sFooterRSSearch__search .search-fake-input {
  border: 1px solid #393631;
}
.search-fake-input .svgIcon {
  font-size: 1.5em;
  float: right;
}
.sFooterRSSearch__search .search-fake-input .svgIcon {
  font-size: 18px;
}
.ss360-pagination__copy {
  display: none !important;
}
/* Website styles */
/*  SLICK CAROUSEL .......................................................... */
/*  BASE STYLES: slick.css */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
/* Dots */
.slick-dots {
  position: absolute;
  bottom: -45px;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
  /* background: red; */
}
.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  font-size: 6px;
  line-height: 20px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  content: ' ';
  opacity: 0.25;
  background-color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  transition: opacity 0.3s ease-out;
}
.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}
/*  USER STYLES ............................................................. */
.slick-slider {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
}
.slick-list.draggable {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: move;
}
/*  CAROUSEL STANDARD
    3 box de larges sur desktop.
    On reduit le nombre de boxes pour mobile. */
.jsCarouselStd {
  display: none;
}
.jsCarouselStd.slick-initialized {
  display: block;
}
/*  CAROUSEL PAGE HEAD
    Images full screen en rotation, fade une a l'autre.
    Parallax sur les images dans le carousel. */
.jsCarouselPageHead {
  opacity: 0;
}
.jsCarouselPageHead.slick-initialized {
  opacity: 1;
  transition: opacity 0.5s;
}
.jsCarouselPageHead,
.slick-list,
.slick-track {
  height: 100%;
  width: 100%;
}
/* Carousel (Slick plugin) */
/*  HELPERS et AUTRES STYLES ................................................ */
/*  AUTRES STYLES
    Autres helpers simples. */
/* Uppercase / lowercase */
.lower {
  text-transform: none;
}
.upper {
  text-transform: uppercase;
}
/* Content alignment */
.centered {
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
/* Text modificator */
.colorBrownDark {
  color: #393631;
}
.colorBrown {
  color: #695e4a;
}
.colorBrownLighter {
  color: #6e6450;
}
.colorBrownLightest {
  color: #b4aea4;
}
/* Text shadow */
.textShadow {
  text-shadow: 0 0.05em 0.15em rgba(0, 0, 0, 0.6);
}
/* Other helpers */
.demoIcon .svgIcon {
  font-size: 3em;
  margin-top: 0;
}
.noWrap {
  white-space: nowrap;
}
.hideText {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.screenReaderText {
  display: none;
}
.softHide {
  display: none;
}
/* Difference between hide and softHide: hide has important, softHide doesn't */
.hidden {
  display: none !important;
  visibility: hidden;
}
.visuallyHidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyHidden.focusable:active,
.visuallyHidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.invisible {
  visibility: hidden;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.noTextShadow {
  text-shadow: none;
}
.bordure-0 {
  border: none;
}
.dropShadow {
  -webkit-filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.9));
          filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.9));
}
.dropShadow-leger {
  -webkit-filter: drop-shadow(0px 0px 1.3em rgba(0, 0, 0, 0.1));
          filter: drop-shadow(0px 0px 1.3em rgba(0, 0, 0, 0.1));
}
.bordure-blanche-1em {
  border: 1em solid #fff;
}
.texte-blanc {
  color: #fff;
}
.texte-jumbo {
  font-size: 2.6rem !important;
  line-height: 1.3 !important;
}
.texte-extra-gros {
  font-size: 2.2rem !important;
  line-height: 1.3 !important;
}
.texte-tres-tres-gros {
  font-size: 1.8rem !important;
  line-height: 1.3 !important;
}
.texte-tres-gros {
  font-size: 1.4rem !important;
  line-height: 1.3 !important;
}
.texte-gros {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
}
.texte-moyen {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
}
.texte-petit {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
}
.texte-tres-petit {
  font-size: 0.7rem !important;
  line-height: 1.2 !important;
}
.texte-nowrap {
  white-space: nowrap !important;
}
.w70 {
  width: 70%;
}
.img-fluid {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
}
.texte-vert {
  color: #67a237;
}
.texte-bleu {
  color: var(--color-bleu);
}
/* Fonds */
.fond-blanc {
  background-color: #fff;
}
.fond-vert {
  background-color: var(--color-primary);
}
.fond-bleu {
  background-color: var(--color-bleu);
}
.fond-rose {
  background-color: var(--color-rose);
}
.fond-vert a,
.fond-vert a:visited,
.fond-vert .imgLink__bottom,
.fond-vert .btnIcon--nav .fond-bleu a,
.fond-bleu a:visited,
.fond-bleu .imgLink__bottom,
.fond-bleu .btnIcon--nav .fond-rose a,
.fond-rose a:visited,
.fond-rose .imgLink__bottom,
.fond-rose .btnIcon--nav {
  color: #fff;
}
.fond-vert .imgLink__bottom,
.fond-bleu .imgLink__bottom,
.fond-rose .imgLink__bottom {
  font-weight: 600;
}
/* Paddings - Margins */
.p-50px {
  padding: 50px !important;
}
.px-30px {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}
.pr-md-75px {
  padding-right: 75px !important;
}
.mb-30px {
  margin-bottom: 30px !important;
}
.mb-50px {
  margin-bottom: 50px !important;
}
.mb-70px {
  margin-bottom: 70px !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-1em {
  margin-top: 1em !important;
}
.mt-2em {
  margin-top: 2em !important;
}
.mt-3em {
  margin-top: 3em !important;
}
.mt-30px {
  margin-top: 30px !important;
}
.mb-point5em {
  margin-bottom: 0.5em !important;
}
.mb-5em {
  margin-bottom: 5em !important;
}
.ml-20px {
  margin-left: 20px !important;
}
@media (min-width: 1100px) {
  .pr-xl-100px {
    padding-right: 100px !important;
  }
  .pl-xl-100px {
    padding-left: 100px !important;
  }
}
@media screen and (max-width: 1099px) and (min-width: 992px) {
  .pr-lg-100px {
    padding-right: 100px !important;
  }
  .pl-lg-100px {
    padding-left: 100px !important;
  }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  .pr-md-100px {
    padding-right: 100px !important;
  }
  .pl-md-100px {
    padding-left: 100px !important;
  }
}
@media screen and (max-width: 767px) {
  .pr-sm-25px {
    padding-right: 25px !important;
  }
  .pl-sm-25px {
    padding-left: 25px !important;
  }
}
/* Display show - hide */
@media (min-width: 1100px) {
  .d-xl-block {
    display: block !important;
  }
  .d-xl-none {
    display: none !important;
  }
}
@media screen and (max-width: 1099px) and (min-width: 992px) {
  .d-lg-block {
    display: block !important;
  }
  .d-lg-none {
    display: none !important;
  }
}
@media screen and (max-width: 991px) and (min-width: 768px) {
  .d-md-block {
    display: block !important;
  }
  .d-md-none {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .d-sm-block {
    display: block !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .pr-sm-0 {
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 992px) {
  .d-none-sm-md {
    display: none !important;
  }
}
/* <span class="d-none-sm-md"><br></span> */
.max-width-700px {
  max-width: 700px;
}
/* Colonnes */
@media screen and (min-width: 992px) {
  .col-flex {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
  .col-flex > .col-flex__item {
    flex: 1 1 auto;
  }
  .col-flex__2-col-50-50 > .col-flex__item {
    width: 50%;
    padding: 0 25px;
  }
  .col-flex__2-col-auto > .col-flex__item {
    flex: 0 1 auto;
    padding: 0 25px;
  }
  .col-flex__2-col-33 > .col-flex__item {
    width: 33.333%;
    padding: 0 25px;
  }
}
.col-flex--align-items-start {
  align-items: flex-start;
}
.col-flex--stretch {
  align-items: stretch;
}
.col-flex--justify-content-center {
  justify-content: center;
}
@media (min-width: 767px) {
  .sListMunicipalites .iMunicipalite.iMunicipalite--small {
    max-width: 290px;
    width: 290px;
    margin: 0 1%;
    padding: 10px 10px 0 10px;
  }
  .iMunicipalite--small .iMunicipalite__c {
    padding-bottom: 1em;
  }
  .iMunicipalite--small .municipaliteTitle {
    font-size: 1.6em;
  }
  .sListMunicipalites .iMunicipalite.iMunicipalite--medium {
    max-width: 400px;
    width: 400px;
    margin: 0 1%;
    padding: 10px 10px 0 10px;
  }
  .iMunicipalite--medium .iMunicipalite__c {
    padding-bottom: 1em;
  }
  .iMunicipalite--medium .municipaliteTitle {
    font-size: 1.6em;
  }
}
/* Tableau adaptatif */
.tableau-adaptatif {
  border-top: 1px solid #999999;
}
.tableau-adaptatif td {
  padding: 10px;
  text-align: left;
  vertical-align: top;
}
@media (max-width: 767px) {
  .tableau-adaptatif td {
    display: block;
    width: 100%;
    height: auto;
  }
  .tableau-adaptatif tr td:last-child {
    border-bottom: 1px solid #999999;
  }
}
@media (min-width: 768px) {
  .tableau-adaptatif--2colonnes th,
  .tableau-adaptatif--3colonnes th,
  .tableau-adaptatif--4colonnes th,
  .tableau-adaptatif--2colonnes td,
  .tableau-adaptatif--3colonnes td,
  .tableau-adaptatif--4colonnes td {
    border-bottom: 1px solid #999999;
  }
  .tableau-adaptatif--2colonnes td,
  .tableau-adaptatif--2colonnes th {
    width: 50%;
  }
  .tableau-adaptatif--3colonnes td,
  .tableau-adaptatif--3colonnes th {
    width: 33.333%;
  }
  .tableau-adaptatif--3colonnes td,
  .tableau-adaptatif--3colonnes th {
    width: 25%;
  }
}
/* Fierement Velo */
.item-fierement-velo {
  margin-bottom: 85px;
  background-color: #87aa44;
  position: relative;
  border: 8px solid #5a7540;
  padding: 25px 20px;
  text-align: center;
  color: #fff;
  border-radius: 15px;
}
.item-fierement-velo::before {
  content: "";
  width: 60px;
  height: 60px;
  position: absolute;
  top: -40px;
  left: 50%;
  margin-left: -30px;
  background: url(/upload/logo-fierement-velo.png) no-repeat center center;
  background-size: contain;
  border-radius: 50%;
}
.item-fierement-velo .item-fierement-velo__nom {
  font-weight: bold;
  font-size: 1.3em;
  margin-bottom: 5px;
}
.item-fierement-velo p {
  margin-top: 0;
}
/* Helpers selector: visuallyHidden, clearfix, etc. */