@import url('bootstrap.css');
@import url('bootstrap-responsive.css');
@import url('fonts/titillium/stylesheet.css');
@import url('fonts/gooddog/stylesheet.css');
@import url('fonts/icons/fontello.css');
@import url('fonts/icons/animation.css');

/* - Init -----------------------------------------------> */
/* - Variables ------------------------------------------> */
/* - Styles ---------------------------------------------> */
html {
  font-size: 62.5%;
}
body {
  font-family: 'TitilliumText22LRegular', Arial, sans-serif;
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 400;
  color: #333;
}
/*@media (max-width: 479px) {body{background-color:red;}}*/
.souligne {
  background-color: #1e6fc1;
  color: #fff;
  padding: 2px 5px;
  font-weight: normal;
}
.centrer,
.aligncenter {
  text-align: center;
}
.alignleft {
  text-align: left;
}
.alignright {
  text-align: right;
}
img.alignleft {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}
::-moz-selection {
  background: #6f9e1c;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #6f9e1c;
  color: #fff;
  text-shadow: none;
}
a:link {
  -webkit-tap-highlight-color: #6f9e1c;
}
i.icon {
  padding-right: 1em;
  margin-top: -0.3em;
}
@media (max-width: 767px) {
  .desktop {
    display: none;
  }
}
@media (max-width: 500px) {
  img.block {
    float: none !important;
    text-align: center;
  }
}
/* ------------------------------------------------------------ */
/* -
/* --> Entête
/* -
/* ------------------------------------------------------------ */
@media (max-width: 767px) {
  header {
    position: relative;
    background-color: #fff;
  }
  header div#header_container {
    height: 170px;
    background: none;
	text-align:center;
  }
  header div#header_container a#logo {
    position: relative;
    top: 8px;
    left: auto;
    display: inline-block;
    width: 350px;
    height: 200px;
    text-indent: -9999em;
    background: url('../img/template/header/logo-ranch-nov-2017.png') no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
  }
  header div.navbar {
    color: #fff;
  }
  header div.navbar div.navbar-inner {
    background-image: none;
    border: 0;
    background-color: #ffb400;
    border-radius: 0;
    -webkit-border-radius: 0;
	
	-webkit-box-shadow:inset 0 5px 7px 0 rgba(0,0,0,0.20);
	box-shadow:inset 0 5px 7px 0 rgba(0,0,0,0.20);
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse {
    padding-top: 6px;
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul.nav li a {
    color: white;
    letter-spacing: 0.1em;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-shadow: none;
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul.nav li.active a,
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul.nav li a:hover {
    color: black;
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul.nav li.open a {
    color: black;
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul.nav li.open ul li a {
    color: white;
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul.nav li.open ul li.active a,
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul.nav li.open ul li a:hover {
    color: black;
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul.nav ul.dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
    display: none;
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul#nav-meta li a {
    font-size: 0.9em;
    color: #ddd;
    padding: 4px 15px;
  }
  header div.navbar div.navbar-inner div.nav-collapse.collapse ul#nav-meta li li:hover a {
    color: #222;
  }
}
@media (min-width: 768px) {
  header {
    position: relative;
    background-color: #fff;
    min-height: 225px;
  }
  header div#header_container {
    min-height: 175px;
    background: none;
  }
  header div#header_container a#logo {
    position: relative;
    top: 10px;
    left: 0;
    display: block;
    width: 517px;
    height: 200px;
    text-indent: -9999em;
    z-index: 4500;
    background: url('../img/template/header/logo-ranch-nov-2017.png') no-repeat;
  }
  header div#lang_sel {
    position: absolute;
    top: -122px;
    right: 40px;
  }
  header div.navbar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    color: #fff;
    /*z-index: 3000;*/
    background-color: #ffb400;
  }
  header div.navbar div.navbar-inner {
    background-color: #ffb400;
    background-image: none;
    border: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
	-webkit-box-shadow:inset 0 5px 7px 0 rgba(0,0,0,0.20);
	box-shadow:inset 0 5px 7px 0 rgba(0,0,0,0.20);
  }
  header div.navbar div.navbar-inner ul#nav-main {
    float: right;
  }
  /* Styles pour police differente 
  
  header div.navbar div.navbar-inner ul#nav-main li a {
    position: relative;
    display: inline-block;
    color: #fff;
    text-shadow: none;
    font-family: 'Raleway', Arial, sans-serif;
    text-transform: lowercase;
    font-size: 22px;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: capitalize;
    padding: 10px 22px 14px;
    background-color: none;
    z-index: 4600;
  }
  */
  header div.navbar div.navbar-inner ul#nav-main li a {
    position: relative;
    display: inline-block;
    color: #fff;
    text-shadow: none;
    font-family: 'GoodDogRegular', Arial, sans-serif;
    text-transform: lowercase;
    font-size: 22px;
    font-size: 2.2rem;
    padding: 10px 22px 14px;
    background-color: none;
    z-index: 4600;
  }
  header div.navbar div.navbar-inner ul#nav-main li a:hover {
    background-color: rgba(48,48,48,0.35);
  }
  header div.navbar div.navbar-inner ul#nav-main li.dropdown:hover ul.dropdown-menu {
    display: block;
  }
  header div.navbar div.navbar-inner ul#nav-main li.dropdown:hover ul.dropdown-menu ul.dropdown-menu {
    display: none;
  }
  header div.navbar div.navbar-inner ul#nav-main li.dropdown:hover ul.dropdown-menu li.dropdown-submenu:hover ul.dropdown-menu {
    display: block;
  }
  header div.navbar div.navbar-inner ul#nav-main li ul.dropdown-menu {
    margin-top: 0;
    border: 0;
    background: none;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    z-index: 3001;
  }
  header div.navbar div.navbar-inner ul#nav-main li ul.dropdown-menu li {
    background: none;
  }
  header div.navbar div.navbar-inner ul#nav-main li ul.dropdown-menu li a {
    font-family: 'TitilliumText22LRegular', Arial, sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    display: block;
    background-color: #fbf1e0;
    color: #6f9e1c;
    padding: 10px 30px;
  }
  header div.navbar div.navbar-inner ul#nav-main li ul.dropdown-menu li a:hover {
    background-color: #d6cec1;
    color: black;
    background-image: none;
  }
  header div.navbar div.navbar-inner ul#nav-main li.active a {
    background-color: #5a8c01;
  }
  header div.navbar div.navbar-inner ul#nav-main li.active a:hover {
    color: #fff;
  }
  header div.navbar div.navbar-inner ul#nav-meta {
    float: none;
    position: absolute;
    top: -116px;
    right: 0;
    left: auto;
  }
  header div.navbar div.navbar-inner ul#nav-meta li {
    text-align: right;
    float: none;
    display: block;
  }
  header div.navbar div.navbar-inner ul#nav-meta li a {
    display: inline-block;
    background-color: #e69100;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 2px 4px 1px;
    margin: 0 22px 3px 0;
  }
  header div.navbar div.navbar-inner ul#nav-meta li a:hover {
    background-color: #b06f01;
  }
}
@media (min-width: 980px) {
  header div#header_container {
    background-position: 170px 16px;
    background-size: 40% auto;
  }
  header div.navbar div.navbar-inner ul#nav-main li a {
    position: relative;
    font-size: 30px;
    font-size: 3.1rem;
    padding: 10px 30px 14px;
    z-index: 4600;
  }
  header div.navbar div.navbar-inner ul#nav-meta li a {
    font-size: 13px;
    font-size: 1.3rem;
    margin: 0 30px 3px 0;
  }
}
@media (min-width: 980px) {
  header .navbar .container {
    width: 960px;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  header .navbar .container {
    width: 744px;
  }
}
/* ------------------------------------------------------------ */
/* -
/* --> Banner
/* -
/* ------------------------------------------------------------ */
section#banner.infos-camp {
  background: #ffffff url('../img/pages/infos/banner-5.jpg') no-repeat center top;
}
section#banner.infos-equipe {
  background: #ffffff url('../img/pages/accueil/banner-1.jpg') no-repeat center top;
}
section#banner.infos-visite {
  background: #ffffff url('../img/pages/infos/banner-5.jpg') no-repeat center top;
}
section#banner.infos-activites {
  background: #ffffff url('../img/pages/infos/banner-5.jpg') no-repeat center top;
}
section#banner.infos-prix {
  background: #ffffff url('../img/pages/infos/banner-5.jpg') no-repeat center top;
}
section#banner.camp-sejour {
  background: #ffffff url('../img/pages/camp/banner-1.jpg') no-repeat center top;
}
section#banner.camp-jour {
  background: #ffffff url('../img/pages/camp/banner-2.jpg') no-repeat center top;
}
section#banner.equitation {
  background: #ffffff url('../img/pages/equitation/banner-9.jpg') no-repeat center top;
}
section#banner.equitation-installations {
  background: #ffffff url('../img/pages/equitation/banner-2.jpg') no-repeat center top;
}
section#banner.groupe {
  background: #ffffff url('../img/pages/groupe/banner-enfants.jpg') no-repeat center top;
}
section#banner.scolaire {
  background: #ffffff url('../img/pages/scolaire/banner-autobus.jpg') no-repeat center top;
}
section#banner.fete-enfants {
  background: #ffffff url('../img/pages/fete-enfants/banner-1.jpg') no-repeat center top;
}
section#banner.contact {
  background: #ffffff url('../img/pages/contact/banner-1.jpg') no-repeat center top;
}
section#banner.faq {
  background: #ffffff url('../img/pages/faq/banner.jpg') no-repeat center top;
}

/* Styles pour les cercles services avec police différente

section#banner.accueil div#icons a{
  display: flex;
  align-items: center;
  justify-content: center;
  float: left;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border: 5px solid #fff;
  border-radius: 50%;
  padding: .5rem;
  box-sizing: border-box;
}

section#banner.accueil div#icons a:hover{
  transform: scale(.95);
}

section#banner.accueil div#icons a#icon-cv {
  background-image: radial-gradient(#92b653 25%, #73a022);
}
section#banner.accueil div#icons a#icon-fe {
  background-image: radial-gradient(#aba094 25%, #8b7d6d);
}
section#banner.accueil div#icons a#icon-cj {
  background-image: radial-gradient(#ffc63e 25%, #eca603);
}
section#banner.accueil div#icons a#icon-ee {
  background-image: radial-gradient(#5592d0 25%, #1f69b3);
}
section#banner.accueil div#icons a#icon-ss {
  background-image: radial-gradient(#c93f3f 25%, #aa0303);
}
*/

@media (min-width: 768px) {
  section#banner {
    height: 200px;
    background-size: 1200px auto !important;
  }
  section#banner.accueil {
    height: 510px;
    overflow: hidden;
  }
  section#banner.accueil div#cycle {
    width: 100%;
    margin: 0;
    z-index: 1000;
  }
  section#banner.accueil div#cycle div {
    height: 510px;
    width: 100%;
    margin: 0 auto;
  }
section#banner.accueil div#cycle div#banner-accueil-1 {
    background: url('../img/pages/accueil/banner-1.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-2 {
    background: url('../img/pages/accueil/banner-33.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-3 {
    background: url('../img/pages/accueil/3-accueil-e.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-4 {
    background: url('../img/pages/accueil/4-accueil-e.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-5 {
    background: url('../img/pages/accueil/6-accueil-e.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-6 {
    background: url('../img/pages/accueil/banner-promo4.jpg') no-repeat center center;
  }
  
.webp-support section#banner.accueil div#cycle div#banner-accueil-1 {
    background: url('../img/pages/accueil/banner-1.jpg.webp') no-repeat center center;
  }
  .webp-support section#banner.accueil div#cycle div#banner-accueil-2 {
    background: url('../img/pages/accueil/banner-33.jpg.webp') no-repeat center center;
  }
  .webp-support section#banner.accueil div#cycle div#banner-accueil-3 {
    background: url('../img/pages/accueil/3-accueil-e.jpg.webp') no-repeat center center;
  }
  .webp-support section#banner.accueil div#cycle div#banner-accueil-4 {
    background: url('../img/pages/accueil/4-accueil-e.jpg.webp') no-repeat center center;
  }
  .webp-support section#banner.accueil div#cycle div#banner-accueil-5 {
    background: url('../img/pages/accueil/6-accueil-e.jpg.webp') no-repeat center center;
  }
  .webp-support section#banner.accueil div#cycle div#banner-accueil-6 {
    background: url('../img/pages/accueil/banner-promo4.jpg.webp') no-repeat center center;
  }
  section#banner.accueil div#icons {
    position: relative;
    top: 368px;
    z-index: 9000;
  }
  
  section#banner.accueil div#icons a {
    display: block;
    float: left;
    width: 129px;
    height: 117px;
    height: 129px;
    text-indent: -9999em;
    margin: 0 5px;
  }
	
  /* Styles pour cercles services avec police différente
  
  section#banner.accueil div#icons a{
    width: 129px;
    height: 117px;
    height: 129px;
    font-size: 1.5rem;
    line-height: 1.75rem;
    margin: 0 5px;
  }
  */
  section#banner.accueil div#icons a#icon-cv {
    background: url('../img/pages/accueil/banner-icon-cv.png');
  }
  section#banner.accueil div#icons a#icon-fe {
    background: url('../img/pages/accueil/banner-new/banner-icon-fe.png');
  }
  section#banner.accueil div#icons a#icon-cj {
    background: url('../img/pages/accueil/banner-new/banner-icon-cj.png');
  }
  section#banner.accueil div#icons a#icon-ee {
    background: url('../img/pages/accueil/banner-new/banner-icon-ee.png');
  }
  section#banner.accueil div#icons a#icon-ss {
    background: url('../img/pages/accueil/banner-new/banner-icon-ss.png');
  }
  section#banner.accueil div#icons a#icon-ag {
    background: url('../img/pages/accueil/banner-new/banner-icon-ag.png');
  }
  section#banner.accueil div#icons a#icon-cv.en {
    background: url('../img/pages/accueil/banner-icon-cv-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-fe.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-fe-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-cj.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-cj-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-ee.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-ee-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-ss.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-ss-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-ag.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-ag-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-cv,
  section#banner.accueil div#icons a#icon-ss,
  section#banner.accueil div#icons a#icon-ag,
  section#banner.accueil div#icons a#icon-ee,
  section#banner.accueil div#icons a#icon-fe,
  section#banner.accueil div#icons a#icon-cj {
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  
  section#banner.accueil div#icons a:hover {
    width: 125px;
    height: 112px;
    margin: 2px 7px;
  }
  
}
@media (max-width: 767px) {
  section#banner {
    height: 200px !important;
    background-size: auto 200px !important;
  }
  section#banner.accueil {
    overflow: hidden;
    /*height: auto !important;*/
  }
  section#banner.accueil div#cycle {
    width: 100%;
    margin: 0;
    z-index: 1000;
  }
  section#banner.accueil div#cycle div {
    height: 200px;
    width: 100%;
    margin: 0 auto;
    background-size: auto 200px !important;
  }
section#banner.accueil div#cycle div#banner-accueil-1 {
    background: url('../img/pages/accueil/banner-1.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-2 {
    background: url('../img/pages/accueil/banner-33.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-3 {
    background: url('../img/pages/accueil/3-accueil-e.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-4 {
    background: url('../img/pages/accueil/4-accueil-e.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-5 {
    background: url('../img/pages/accueil/5-accueil-e.jpg') no-repeat center center;
  }
  section#banner.accueil div#cycle div#banner-accueil-6 {
    background: url('../img/pages/accueil/banner-promo4.jpg') no-repeat center center;
  }
  
  /* Styles pour cercles services avec police différente
  
  section#banner.accueil div#icons {
    position: relative;
    top: 135px;
    z-index: 9000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 120px 0 20px;
  }
  */
  
  section#banner.accueil div#icons {
    position: relative;
    top: 135px;
    z-index: 9000;
  }
  
  section#banner.accueil div#icons a {
    display: block;
    float: left;
    width: 54px;
    height: 54px;
    text-indent: -9999em;
    margin: 0 5px;
  }
  
  /* Styles pour cercles services avec police différente
  
  section#banner.accueil div#icons a{
    min-width: 110px;
    min-height: 110px;
    flex-basis: 16%;
    font-size: 1.3rem;
    line-height: 1.75rem;
    height: auto;
    aspect-ratio: 1;
    border: 2px solid #fff;
  }
  */
  
  section#banner.accueil div#icons a#icon-cv {
    background: url('../img/pages/accueil/banner-icon-cv.png');
  }
  section#banner.accueil div#icons a#icon-fe {
    background: url('../img/pages/accueil/banner-new/banner-icon-fe.png');
  }
  section#banner.accueil div#icons a#icon-cj {
    background: url('../img/pages/accueil/banner-new/banner-icon-cj.png');
  }
  section#banner.accueil div#icons a#icon-ee {
    background: url('../img/pages/accueil/banner-new/banner-icon-ee.png');
  }
  section#banner.accueil div#icons a#icon-ss {
    background: url('../img/pages/accueil/banner-new/banner-icon-ss.png');
  }
  section#banner.accueil div#icons a#icon-ag {
    background: url('../img/pages/accueil/banner-new/banner-icon-ag.png');
  }
  
  section#banner.accueil div#icons a#icon-cv.en {
    background: url('../img/pages/accueil/banner-icon-cv-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-fe.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-fe-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-cj.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-cj-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-ee.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-ee-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-ss.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-ss-en.png') no-repeat;
  }
  section#banner.accueil div#icons a#icon-ag.en {
    background: url('../img/pages/accueil/banner-new/banner-icon-ag-en.png') no-repeat;
  }
  
  section#banner.accueil div#icons a#icon-cv,
  section#banner.accueil div#icons a#icon-ss,
  section#banner.accueil div#icons a#icon-ag,
  section#banner.accueil div#icons a#icon-ee,
  section#banner.accueil div#icons a#icon-fe,
  section#banner.accueil div#icons a#icon-cj {
    background-size: contain !important;
    background-repeat: no-repeat !important;
  }
  
  section#banner.accueil div#icons a:hover {
    width: 62px;
    height: 62px;
  }
  
}
@media (min-width: 980px) {
  section#banner {
    height: 370px;
    background-size: 2000px auto !important;
  }
  section#banner.accueil {
    height: 525px;
  }
  section#banner.accueil div#cycle div {
    height: 525px;
  }
  section#banner.accueil div#icons {
    top: 355px;
  }
  
  section#banner.accueil div#icons a {
    display: block;
    float: left;
    width: 172px;
    height: 156px;
    /*height: 172px;*/
    text-indent: -9999em;
    margin: 0 8px;
    background-size: contain !important;
  }
	/* Styles pour cercles services avec police différente
  
  section#banner.accueil div#icons a{
    width: 172px;
    height: 172px;
    font-size: 2rem;
    line-height: 2.5rem;
    margin: 0 8px;
  }
  */
  
  section#banner.accueil div#icons a:hover {
    width: 168px;
    height: 152px;
    margin: 2px 10px;
  }
  
}
/* ------------------------------------------------------------ */
/* -
/* - General Styles for Featured Section                      */
/* -
/* ------------------------------------------------------------ */

section#featured {
  background-color: #ffb400;
  padding: 0 2%;  /* Peut être ajusté pour différentes tailles d'écran */
}

section#featured article {
  background-color: #e69100;
  height: auto;  /* Hauteur ajustée automatiquement */
}

section#featured article div#featured-infos {
  font-size: 1.6rem;
  line-height: 2.3rem;
  padding: 10px;
}

section#featured article div#featured-infos h1 {
  font-family: 'TitilliumText22LBold', Arial, sans-serif;
  color: #fff;
  font-size: 2.4rem;
  margin-bottom: 0;
  padding-bottom: 0;
}

section#featured article div#featured-infos time {
  display: block;
  color: #c43a00;
  font-family: 'TitilliumText22LBold', Arial, sans-serif;
  margin-bottom: 12px;
}

section#featured article div#featured-infos p a {
  display: block;
  color: #fff;
  font-weight: bold;
}

section#featured article div#featured-infos .featured-button {
  display: inline-flex;
  align-items: center;
  width: max-content;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  background-image: linear-gradient(to top, #1f6fc1, #377fc8);
  padding: 1.5rem 2rem;
  clip-path: polygon(0% 3%, 100% 0%, 100% 100%, 0% 97%); 
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

section#featured article div#featured-infos .featured-button:hover {
  background-image: linear-gradient(to top, #1653b1, #2a60ba);
  text-decoration: none;
}

section#featured article div#featured-infos .featured-button::after {
  content: '►';
  display: block;
  margin-left: 1rem;
}

/* ------------------------------------------------------------ */
/* - Mobile (max-width: 767px) Styles                         */
/* ------------------------------------------------------------ */
@media (max-width: 767px) {
  section#featured article div#featured-img {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  section#featured article div#featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'image s'adapte sans se déformer */
    object-position: center; /* L'image est centrée dans son conteneur */
  }
}

/* ------------------------------------------------------------ */
/* - Tablet and Larger (min-width: 768px) Styles              */
/* ------------------------------------------------------------ */
@media (min-width: 768px) {
  section#featured article div#featured-img {
    position: relative;
    height: 0;
    padding-bottom: 40%;  /* Ajuste la hauteur en fonction de l'image */
    overflow: hidden;
  }

  section#featured article div#featured-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Couvre le conteneur sans déformation */
    object-position: center; /* L'image reste centrée */
  }
}

/* ------------------------------------------------------------ */
/* - Large Screens (min-width: 980px) Styles                  */
/* ------------------------------------------------------------ */
@media (min-width: 980px) {
  section#featured article div#featured-img {
    position: relative;
    height: 0;
    padding-bottom: 40%;  /* Ajuste la hauteur pour conserver l'aspect ratio */
    overflow: hidden;
  }

  section#featured article div#featured-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Centrage de la section "featured" */
section#featured .container {
  display: flex;
  flex-wrap: wrap; /* Permet d'adapter sur petits écrans */
  align-items: center; /* Centrer verticalement les éléments */
  gap: 20px; /* Espacement entre l'image et le texte */
}

/* Alignement de l'image à gauche */
section#featured #featured-img {
  flex: 0 0 auto; /* Empêche l'image de s'étendre */
  display: flex;
  justify-content: flex-start; /* Aligne à gauche */
  align-items: center; /* Centre verticalement */
}

/* Ajustement de l'image */
section#featured #featured-img img {
  display: block;
  max-width: 100%; /* Empêche l'image de dépasser */
  height: auto; /* Maintient les proportions */
  object-fit: cover; /* Conserve un bon affichage */
}

/* Centrage vertical du texte */
section#featured #featured-infos {
  flex: 1; /* Le texte prend tout l'espace restant */
  text-align: left; /* Aligne le texte à gauche */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centre verticalement le texte */
  padding: 10px; /* Ajoute un peu d'espacement */
  box-sizing: border-box;
}



/* ------------------------------------------------------------ */
/* -
/* --> Contenu
/* -
/* ------------------------------------------------------------ */
div#main section#contenu h1 {
  color: #6f9e1c;
  text-transform: uppercase;
}
div#main section#contenu h2 {
  color: #1e6fc1;
  font-weight: 400;
}
div#main section#contenu p {
  line-height: 1.5em;
  margin-bottom: 12px;
}
div#main section#contenu p.petitscaracteres {
  font-size: 0.8em;
  font-style: italic;
  text-align: right;
  margin-top: -8px;
}
div#main section#contenu p.soustitre {
  color: #1e6fc1;
}
div#main section#contenu table {
  width: 100%;
  margin-bottom: 15px;
}
div#main section#contenu table tr {
  border-bottom: 1px solid #e69100;
}
div#main section#contenu table tr th,
div#main section#contenu table tr td {
  padding: 6px 5px 2px;
  text-align: left;
}
div#main section#contenu table tr th {
  background-color: #ffb400;
  color: #fff;
}
div#main section#contenu table tr td {
  color: #333;
}
div#main aside a.btn-bleu,
div#main aside a.btn-vert,
div#main aside a.btn-orange,
div#main aside a.btn-gris,
div#main aside a.btn-rouge,
div#main aside p.btn-bleu a,
div#main aside p.btn-vert a,
div#main aside p.btn-orange a,
div#main aside p.btn-gris a,
div#main aside p.btn-rouge a {
  display: block;
  color: #fff;
  width: 260px;
  height: 61px;
  padding: 30px 26px 0;
  font-size: 18px;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-family: 'TitilliumText22LXBold', Arial, sans-serif;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
div#main aside a.btn-bleu em,
div#main aside a.btn-vert em,
div#main aside a.btn-orange em,
div#main aside a.btn-gris em,
div#main aside a.btn-rouge em,
div#main aside p.btn-bleu a em,
div#main aside p.btn-vert a em,
div#main aside p.btn-orange a em,
div#main aside p.btn-gris a em,
div#main aside p.btn-rouge a em {
  font-size: 12px;
  font-size: 1.2rem;
  display: block;
}
div#main aside a.btn-bleu:hover,
div#main aside a.btn-vert:hover,
div#main aside a.btn-orange:hover,
div#main aside a.btn-gris:hover,
div#main aside a.btn-rouge:hover,
div#main aside p.btn-bleu a:hover,
div#main aside p.btn-vert a:hover,
div#main aside p.btn-orange a:hover,
div#main aside p.btn-gris a:hover,
div#main aside p.btn-rouge a:hover {
  text-decoration: none;
  background-position: center bottom;
}
div#main aside a.btn-bleu,
div#main aside p.btn-bleu a {
  background: url('../img/pages/activites/btn-bleu.gif') no-repeat center top;
}
div#main aside a.btn-vert,
div#main aside p.btn-vert a {
  background: url('../img/pages/activites/btn-vert.gif') no-repeat center top;
}
div#main aside a.btn-orange,
div#main aside p.btn-orange a {
  background: url('../img/pages/activites/btn-orange.gif') no-repeat center top;
}
div#main aside a.btn-gris,
div#main aside p.btn-gris a {
  background: url('../img/pages/activites/btn-gris.gif') no-repeat center top;
}
div#main aside a.btn-rouge,
div#main aside p.btn-rouge a {
  background: url('../img/pages/activites/btn-rouge.gif') no-repeat center top;
}
div#main aside div.sharethis {
  display: none;
}
div#main aside li#rfb_widget-2 {
  list-style-type: none;
}
div#main aside li#rfb_widget-2 h3 {
  display: none;
}
div#main section.activites a,
div#main section.installations a {
  position: relative;
  display: block;
}
div#main section.activites a span,
div#main section.installations a span {
  position: absolute;
  bottom: 17px;
  right: 20px;
  display: block;
  width: 45px;
  height: 45px;
  background: url('../img/template/contenu/zoom.png') no-repeat;
  background-size: 100%;
}
div#main li#addthis-widget-2 {
  margin-top: 20px;
  list-style-type: none;
}
div#main li#addthis-widget-2 h3 {
  display: none;
}
body.page-id-27 div.sharethis {
  display: none;
}

div#main aside .social-button {
  display: flex;
  align-items: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1rem 1.25rem;
  clip-path: polygon(0% 3%, 100% 0%, 100% 100%, 0% 97%); 
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

div#main aside .social-button:hover {
  text-decoration: none; 
}

div#main aside .social-button::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  background-color: #fff;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center center;
  margin-right: 1rem;
}

div#main aside .social-button.facebook-button {
  background-color: #316FF6; 
}
div#main aside .social-button.facebook-button:hover {
  background-color: #285ccd;
}
div#main aside .social-button.facebook-button::before {
  -webkit-mask-image: url(../img/icons/facebook-icon-circle.svg);
  mask-image: url(../img/icons/facebook-icon-circle.svg);
}

div#main aside .social-button.instagram-button {
  background-color: #e1306c;
}
div#main aside .social-button.instagram-button:hover {
  background-color: #c13584; 
}
div#main aside .social-button.instagram-button::before {
  -webkit-mask-image: url(../img/icons/instagram-icon-circle.svg);
  mask-image: url(../img/icons/instagram-icon-circle.svg);
}

div#main aside .social-button.tiktok-button {
  background-color: #000000;
}
div#main aside .social-button.tiktok-button:hover {
  background-color: #2d2d2d;
}
div#main aside .social-button.tiktok-button::before {
  -webkit-mask-image: url(../img/icons/tiktok-icon-circle.svg);
  mask-image: url(../img/icons/tiktok-icon-circle.svg);
}

@media (max-width: 767px) {
  div#main {
    padding-top: 25px;
    padding-bottom: 20px;
    font-size: 16px;
    font-size: 1.6rem;
  }
  div#main section#contenu {
    margin-bottom: 30px;
    padding: 0 2%;
  }
  div#main section#contenu h1 {
    font-size: 40px;
    font-size: 4rem;
    text-transform: uppercase;
  }
  div#main section#contenu p.soustitre {
    font-size: 16px;
    font-size: 1.6rem;
  }
  div#main section#contenu ul.horaire li {
    padding: 5px 0;
  }
  div#main section#contenu ul.horaire li time {
    color: #6f9e1c;
    font-weight: bold;
  }
  div#main div.span4 {
    width: 100%;
  }
  div#main aside {
    font-size: 14px;
    font-size: 1.4rem;
    padding: 0 2%;
  }
  div#main aside div.col {
    float: left;
    width: 42%;
    padding: 0 3%;
  }
  div#main aside h1.titreliste {
    background-color: #ffb400;
    color: #fff;
    text-align: center;
    padding: 14px 0 10px;
    font-size: 18px;
    font-size: 1.8rem;
  }
  div#main aside ul.liste {
    list-style-type: none;
    margin: 0 0 20px;
  }
  div#main aside ul.liste li {
    padding: 8px 10px 8px 25px;
    background: #fcfcfc url('../img/template/contenu/li-array.png') no-repeat 10px center;
    font-size: 16px;
    font-size: 1.6rem;
    border: 1px solid #aaa;
    margin-top: -1px;
  }
  div#main aside section#facebook h1 a {
    text-indent: -9999em;
    display: block;
    width: 100%;
    height: 76px;
    background: url('../img/pages/accueil/aside-facebook.gif') no-repeat;
    background-size: 100%;
  }
  div#main aside section#facebook h1 a.en {
    background: url('../img/pages/accueil/aside-facebook-en.gif') no-repeat;
  }
  div#main aside section#facebook article time {
    font-family: 'TitilliumText22LBold', Arial, sans-serif;
    color: #1e6fc1;
  }
  div#main aside section#facebook hr {
    border-color: #1e6fc1;
  }
  div#main div.activites-banner {
    height: 50px;
    padding: 10px 0 20px;
    margin: 20px 0;
  }
  div#main div.activites-banner h1 {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-size: 30px;
    font-size: 3rem;
    font-family: 'TitilliumText22LXBold', Arial, sans-serif;
  }
  div#main div#activites-sol {
    background: url(../img/pages/activites/section-sol-bande.jpg) no-repeat center bottom;
  }
  div#main div#activites-nautique {
    background: url(../img/pages/activites/section-nautique-bande.jpg) no-repeat center bottom;
  }
  div#main div#activites-air {
    background: url(../img/pages/activites/section-air-bande.gif) no-repeat center bottom;
  }
  div#main div#activites-equitation {
    background: url(../img/pages/activites/section-equitation-bande.jpg) no-repeat center bottom;
  }
  div#main div#activites-ferme {
    background: url(../img/pages/activites/section-ferme-bande.jpg) no-repeat center bottom;
  }
  div#main section.activites {
    padding-bottom: 20px;
  }
  div#main section.activites div.activite {
    margin-bottom: 20px;
  }
  div#main section.activites div.activite div.image {
    margin-bottom: 16px;
  }
  div#main section.activites div.activite div.infos {
    padding: 0 2%;
  }
  div#main section.activites div.activite div.infos h2 {
    font-size: 28px;
    font-size: 2.8rem;
    color: #6f9e1c;
    margin: 0 0 12px;
    line-height: 1em;
  }
  div#main section.activites div.activite div.infos h2.rouge {
    color: #c43a00;
  }
  div#main section.activites div.activite div.infos h2.orange {
    color: #ffb400;
  }
  div#main section.activites div.activite div.infos h2.gris {
    color: #908272;
  }
  div#main section.activites div.activite div.infos h2.bleu {
    color: #1e6fc1;
  }
  div#main ul#activites-btns {
    list-style-type: none;
    text-align: center;
  }
  div#main ul#activites-btns li {
    text-align: left;
  }
  
  .camp-jour + div#main .span4:has(> aside.marge),
  .camp-sejour + div#main .span4:has(> aside.marge) {/*
   	order: -1; */
  }
}
@media (max-width: 767px) and (max-width: 700px) {
  div#main aside section#facebook h1 a div#main aside section#facebook h1 a {
    height: 70px;
  }
}
@media (max-width: 767px) and (max-width: 650px) {
  div#main aside section#facebook h1 a div#main aside section#facebook h1 a {
    height: 65px;
  }
}
@media (max-width: 767px) and (max-width: 600px) {
  div#main aside section#facebook h1 a div#main aside section#facebook h1 a {
    height: 60px;
  }
}
@media (max-width: 767px) and (max-width: 550px) {
  div#main aside section#facebook h1 a div#main aside section#facebook h1 a {
    height: 55px;
  }
}
@media (max-width: 767px) and (max-width: 480px) {
  div#main aside section#facebook h1 a div#main aside section#facebook h1 a {
    height: 68px;
  }
}
@media (max-width: 480px) {
  div#main section#contenu h1 {
    font-size: 25px;
    font-size: 2.5rem;
    line-height: 1.4em;
  }
  div#main section#contenu h2 {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.4em;
    background: url('../img/template/contenu/h2-sep.jpg') no-repeat left bottom;
    padding: 10px 0 33px;
    background-size: 100% 50%;
    margin-bottom: 0;
  }
  div#main section#contenu h3 {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1.4em;
  }
  div#main section#contenu table {
    font-size: 14px;
  }
  div#main aside div.col {
    float: none;
    width: 90%;
    padding: 0 5%;
  }
  div#main div.activites-banner {
    padding: 8px 0 30px;
  }
  div#main div.activites-banner h1 {
    font-size: 20px;
    font-size: 2rem;
  }
  div#main ul#activites-btns {
    margin-left: 0;
  }
  div#main ul#activites-btns li {
    text-align: left;
  }
  div#main div.accordion h3 {
    padding-left: 20px;
    background: url(../img/pages/faq/plus.gif) no-repeat left 3px;
  }
  div#main div.accordion h3.open {
    background: url(../img/pages/faq/moins.gif) no-repeat left 3px;
  }
  div#main div.accordion h3:hover {
    cursor: pointer;
  }
  div#main div.accordion div {
    padding-left: 0px;
  }
}
@media (min-width: 768px) {
  div#main {
    padding-top: 25px;
    padding-bottom: 25px;
    font-size: 16px;
    font-size: 1.6rem;
  }
  div#main section#contenu h1 {
    font-size: 40px;
    font-size: 4rem;
    text-transform: uppercase;
  }
  div#main section#contenu h2 {
    background: url('../img/template/contenu/h2-sep.jpg') no-repeat left bottom;
    padding: 10px 0 33px;
    margin-bottom: 0;
  }
  div#main section#contenu p.soustitre {
    font-size: 16px;
    font-size: 1.6rem;
    margin-top: -14px;
  }
  div#main section#contenu ul.listcheck {
    list-style-type: none;
    margin-left: 0;
    margin: -10px 0 20px;
  }
  div#main section#contenu ul.listcheck li {
    padding: 14px 0 12px 50px;
    background: url('../img/template/contenu/li-check.gif') no-repeat left center, url('../img/template/contenu/sep-dots.gif') repeat-x left bottom;
  }
  div#main section#contenu ul.horaire {
    list-style-type: none;
    margin-left: 0;
  }
  div#main section#contenu ul.horaire li {
    padding: 10px 0 8px 175px;
    background: url('../img/template/contenu/sep-dots.gif') repeat-x left bottom;
  }
  div#main section#contenu ul.horaire li time {
    display: inline-block;
    width: 175px;
    color: #6f9e1c;
    font-weight: bold;
    margin-left: -175px;
  }
  div#main section#contenu .vignette-gauche {
    float: left;
    margin: 0 10px 10px 0;
  }
  div#main aside {
    font-size: 14px;
    font-size: 1.4rem;
  }
  div#main aside a.btn-bleu,
  div#main aside a.btn-vert,
  div#main aside a.btn-orange,
  div#main aside a.btn-gris,
  div#main aside a.btn-rouge,
  div#main aside p.btn-bleu a,
  div#main aside p.btn-vert a,
  div#main aside p.btn-orange a,
  div#main aside p.btn-gris a,
  div#main aside p.btn-rouge a {
    width: 180px;
    height: 43px;
    padding: 22px 26px 0;
    font-size: 13px;
    font-size: 1.3rem;
    background-size: 100%;
    line-height: 1em;
  }
  div#main aside a.btn-bleu em,
  div#main aside a.btn-vert em,
  div#main aside a.btn-orange em,
  div#main aside a.btn-gris em,
  div#main aside a.btn-rouge em,
  div#main aside p.btn-bleu a em,
  div#main aside p.btn-vert a em,
  div#main aside p.btn-orange a em,
  div#main aside p.btn-gris a em,
  div#main aside p.btn-rouge a em {
    font-size: 10px;
    font-size: 1rem;
  }
  div#main aside.marge {
    margin-top: 76px;
  }
  div#main aside.aside-news {
    margin-top: 16px;
    text-align: center;
  }
  div#main aside img {
    margin-bottom: 12px;
  }
  div#main aside img.pushtop {
    margin-top: -76px;
  }
  div#main aside hr {
    border: 0;
    display: block;
    width: 100%;
    height: 15px;
    background: url('../img/template/contenu/aside-sep.png') no-repeat center center;
    background-size: contain;
    margin: 20px 0;
  }
  div#main aside section#facebook {
    margin: 20px 0 30px;
  }
  div#main aside section#facebook h1 a {
    text-indent: -9999em;
    display: block;
    width: 100%;
    height: 56px;
    background: url('../img/pages/accueil/aside-facebook.gif') no-repeat;
    background-size: 100%;
  }
  div#main aside section#facebook h1 a.en {
    background: url('../img/pages/accueil/aside-facebook-en.gif') no-repeat;
  }
  div#main aside section#facebook article time {
    font-family: 'TitilliumText22LBold', Arial, sans-serif;
    color: #1e6fc1;
  }
  div#main aside section#facebook hr {
    border-color: #1e6fc1;
  }
  div#main aside h1.titreliste {
    background-color: #ffb400;
    color: #fff;
    text-align: center;
    padding: 14px 0 10px;
    font-size: 18px;
    font-size: 1.8rem;
  }
  div#main aside h1.titreliste.avecsoleil {
    padding-right: 50px;
    background: #ffb400 url('../img/template/contenu/icone-soleil.png') no-repeat right center;
  }
  div#main aside ul.liste {
    list-style-type: none;
    margin: 0 0 20px;
  }
  div#main aside ul.liste li {
    padding: 8px 10px 8px 25px;
    background: #fcfcfc url('../img/template/contenu/li-array.png') no-repeat 10px center;
    font-size: 16px;
    font-size: 1.6rem;
    border: 1px solid #aaa;
    margin-top: -1px;
  }
  div#main aside ul.liste li span {
    display: block;
  }
  div#main aside nav#subnav h1 {
    font-size: 22px;
    font-size: 2.2rem;
    color: #b06f01;
  }
  div#main aside nav#subnav h1 a {
    color: #b06f01;
  }
  div#main aside nav#subnav ul {
    list-style-type: none;
    margin-left: 0;
  }
  div#main aside nav#subnav ul li {
    margin-bottom: 8px;
  }
  div#main aside nav#subnav ul li a {
    font-size: 18px;
    font-size: 1.8rem;
    display: block;
    padding: 10px 12px 8px;
    color: #000;
    background: #ffb400;
  }
  div#main aside nav#subnav ul li a:hover,
  div#main aside nav#subnav ul li.actif a {
    text-decoration: none;
    background: #e69100;
    color: #fff;
  }
  div#main aside nav#subnav ul li.actif ul li a {
    background-color: #ffb400;
    color: #000;
  }
  div#main aside nav#subnav ul li ul {
    padding-top: 8px;
  }
  div#main aside nav#subnav ul li ul li {
    padding-left: 12px;
    background: #b06f01;
  }
  div#main aside nav#subnav ul li ul li a {
    font-size: 16px;
    font-size: 1.6rem;
  }
  div#main aside nav#subnav ul li ul li a:hover {
    background: #e69100;
    color: #fff;
  }
  div#main aside ul#activites-btns {
    list-style-type: none;
    margin-left: 0;
  }
  div#main aside a.btn-camp {
    color: white;
    display: block;
    margin-bottom: 8px;
    padding: 10px;
    background: #85b822 url('../img/template/contenu/array-white.png') no-repeat 96% center;
    font-family: 'GoodDogRegular', Arial, sans-serif;
    font-size: 28px;
    font-size: 2.8rem;
    line-height: 1em;
  }
  div#main aside a.btn-camp:hover {
    text-decoration: none;
    background-color: #6f9e1c;
  }
  div#main aside a.btn-ins {
    display: block;
    color: white;
    font-family: 'GoodDogRegular', Arial, sans-serif;
    background: #ffb400 url('../img/template/contenu/check-white.png') no-repeat 96% center;
    font-size: 32px;
    font-size: 3.2rem;
    padding: 15px 10px;
    margin-bottom: 0;
    margin-top: 30px;
  }
  div#main aside a.btn-ins:hover {
    text-decoration: none;
    background-color: #e69100;
  }
  div#main aside a.btn-effets {
    display: block;
    color: white;
    font-family: 'GoodDogRegular', Arial, sans-serif;
    background: #1e6fc1 url('../img/template/contenu/effets-white.png') no-repeat 96% center;
    font-size: 32px;
    font-size: 3.2rem;
    padding: 15px 10px;
    margin-bottom: 0;
    margin-top: 30px;
  }
  div#main aside a.btn-effets:hover {
    text-decoration: none;
    background-color: #15589b;
  }
  div#main aside h2.titreinsliste {
    color: white;
    font-family: 'GoodDogRegular', Arial, sans-serif;
    background: #ffb400 url('../img/template/contenu/check-white.png') no-repeat 95% center;
    font-size: 32px;
    font-size: 3.2rem;
    padding: 5px 10px;
    margin-bottom: 0;
    margin-top: 30px;
  }
  div#main aside h2.titreinsliste.sans {
    background-image: none;
    background: #ffb400;
  }
  div#main aside ul.insliste {
    list-style-type: none;
    margin-left: 0;
  }
  div#main aside ul.insliste li a {
    color: white;
    font-family: 'GoodDogRegular', Arial, sans-serif;
    display: block;
    padding: 15px 10px;
    font-size: 28px;
    font-size: 2.8rem;
    background: url('../img/template/contenu/insliste-li.gif') no-repeat left top;
  }
  div#main aside ul.insliste li a:hover {
    text-decoration: none;
    color: #965508;
  }
  div#main aside ul.insliste li ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
  }
  div#main aside ul.insliste li ul li a {
    font-size: 24px;
    font-size: 2.4rem;
    padding: 10px;
  }
  div#main div.activites-banner {
    position: relative;
    height: 80px;
    padding-top: 203px;
    margin: 30px 0;
  }
  div#main div.activites-banner h1 {
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    font-size: 30px;
    font-size: 3rem;
    font-family: 'TitilliumText22LXBold', Arial, sans-serif;
  }
  div#main div#activites-sol {
    background: url(../img/pages/activites/section-sol.jpg) no-repeat center bottom;
  }
  div#main div#activites-nautique {
    background: url(../img/pages/activites/section-nautique.jpg) no-repeat center bottom;
  }
  div#main div#activites-air {
    background: url(../img/pages/activites/section-air.jpg) no-repeat center bottom;
  }
  div#main div#activites-equitation {
    background: url(../img/pages/activites/section-equitation.jpg) no-repeat center bottom;
  }
  div#main div#activites-ferme {
    background: url(../img/pages/activites/section-ferme.jpg) no-repeat center bottom;
  }
  div#main section.activites {
    padding-bottom: 20px;
  }
  div#main section.activites div.activite {
    margin-bottom: 20px;
  }
  div#main section.activites div.activite div.infos h2 {
    font-size: 28px;
    font-size: 2.8rem;
    color: #6f9e1c;
    margin: 0 0 4px;
  }
  div#main section.activites div.activite div.infos h2.rouge {
    color: #c43a00;
  }
  div#main section.activites div.activite div.infos h2.orange {
    color: #ffb400;
  }
  div#main section.activites div.activite div.infos h2.gris {
    color: #908272;
  }
  div#main section.activites div.activite div.infos h2.bleu {
    color: #1e6fc1;
  }
  div#main div.accordion h3 {
    padding-left: 30px;
    background: url(../img/pages/faq/plus.gif) no-repeat left 10px;
  }
  div#main div.accordion h3.open {
    background: url(../img/pages/faq/moins.gif) no-repeat left 10px;
  }
  div#main div.accordion h3:hover {
    cursor: pointer;
  }
  div#main div.accordion div {
    padding-left: 30px;
  }
  div#main form#fcontact input,
  div#main form#fcontact textarea {
    border: 1px solid #999;
    width: 90%;
  }
  div#main form#fcontact textarea {
    width: 95%;
    resize: none;
  }
}
@media (min-width: 980px) {
  div#main section#contenu h1 {
    font-size: 40px;
    font-size: 4rem;
    line-height: 1.3em;
  }
  div#main section#contenu p.soustitre {
    font-size: 20px;
    font-size: 2rem;
  }
  div#main aside a.btn-bleu,
  div#main aside a.btn-vert,
  div#main aside a.btn-orange,
  div#main aside a.btn-gris,
  div#main aside a.btn-rouge,
  div#main aside p.btn-bleu a,
  div#main aside p.btn-vert a,
  div#main aside p.btn-orange a,
  div#main aside p.btn-gris a,
  div#main aside p.btn-rouge a {
    width: 260px;
    height: 58px;
    padding: 30px 26px 0;
    font-size: 18px;
    font-size: 1.8rem;
  }
  div#main aside a.btn-bleu em,
  div#main aside a.btn-vert em,
  div#main aside a.btn-orange em,
  div#main aside a.btn-gris em,
  div#main aside a.btn-rouge em,
  div#main aside p.btn-bleu a em,
  div#main aside p.btn-vert a em,
  div#main aside p.btn-orange a em,
  div#main aside p.btn-gris a em,
  div#main aside p.btn-rouge a em {
    font-size: 12px;
    font-size: 1.2rem;
  }
  div#main aside section#facebook h1 a {
    height: 74px;
  }
  div#main aside h1.titreliste {
    font-size: 25px;
    font-size: 2.5rem;
  }
  div#main aside ul.liste li span {
    display: inline;
  }
  
  .camp-jour + div#main .span4:has(> aside.marge),
  .camp-sejour + div#main .span4:has(> aside.marge) {
    position: sticky;
    top: 0;
  }
}

.camp-jour + div#main > .row:first-child,
.camp-sejour + div#main > .row:first-child {
  display: flex;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------ */
/* -
/* --> Pied de page
/* -
/* ------------------------------------------------------------ */

.newsletter-banner {
  color: #fff;
  background-color: #e69100;
  padding: 2rem 0;
}

.newsletter-banner .container {
  display: flex;
  align-items: center;
}

.newsletter-banner .container > *:first-child {
  width: 60%;
}

.newsletter-banner .container > *:last-child {
  width: 40%;
}

.newsletter-banner .mc4wp-form-theme label {
  font-size: 1.75rem; 
}

.newsletter-banner .mc4wp-form-theme input[type=email] {
  width: 100%;
  max-width: 600px;
  margin-top: 1rem; 
}

.newsletter-banner .mc4wp-form-theme-dark input[type=submit],
.pum-container.popmake .mc4wp-form-theme-dark input[type=submit] {
  color: #fff;
  background-color: #1e6fc1 !important;
  border: none;
  padding: 1rem 1.5rem;
}

.newsletter-banner .mc4wp-form-theme-dark input[type=submit]:hover,
.pum-container.popmake .mc4wp-form-theme-dark input[type=submit]:hover {
  background-color: #000 !important; 
}

/* ------------------------------------------------------------ */
/* -
/* --> Pied de page 2024
/* -
/* ------------------------------------------------------------ */

.yellow-footer{position:relative; background:#ffa829; box-shadow: inset 0px 20px 25px -10px rgba(0, 0, 0, 0.25); z-index:1;}
.yellow-footer .top{position:relative; padding:60px 0;}
.yellow-footer .top .flex{position:relative; display:flex; justify-content:space-between;}
.yellow-footer .top .flex .left{position:relative; width:31%; align-self:center;}
.yellow-footer .top .flex .left .footerlogo{position:relative; display:block; width:auto; margin:0 auto 10px; transition:1s;}
.yellow-footer .top .flex .left .footerlogo:hover{top:-10px; transition:1s;}
.yellow-footer .top .flex .left .coords{position:relative; display:table; margin-left:10px;}
.yellow-footer .top .flex .left .coords .line{position:relative; display:table-row;}
.yellow-footer .top .flex .left .coords .line .col{position:relative; display:table-cell; padding:10px 0 5px; text-align:left; align-self:center;}
.yellow-footer .top .flex .left .coords .line .col img{position:relative; margin-right:15px; max-width:25px; display:inline-block;}
.yellow-footer .top .flex .left .coords .line .col a{position:relative; font-weight:bold; color:#222; font-size:1em;}
.yellow-footer .top .flex .left .coords .line .col a:hover{color:#e78320;}
.yellow-footer .top .flex .center{position:relative; width:31%; align-self:center; text-align:center;}
.yellow-footer .top .flex .center .avis-google{position:relative; display:block; width:200px; text-align:center; padding:10px; border:3px solid #222; color:#222; margin:0 auto 30px; border-radius:10px;}
.yellow-footer .top .flex .center .avis-google:hover{background:#222; color:#fff;}
.yellow-footer .top .flex .center .avis-google img{position:relative; display:inline-block; vertical-align:middle; max-width:15px; margin-left:10px;}
.yellow-footer .top .flex .center .ms-title{position:relative; text-align:center; color:#222; margin-bottom:15px; font-weight:bold; display:inline-block;}
.yellow-footer .top .flex .center .medias{position:relative; display:inline-flex; justify-content:space-between; width:200px;}
.yellow-footer .top .flex .center .medias a{position:relative; max-width:40px;}
.yellow-footer .top .flex .center .medias a img{position:relative;}
.yellow-footer .top .flex .center .medias a:hover{opacity:0.5;}
.yellow-footer .top .flex .right{position:relative; width:31%; align-self:center;}
.yellow-footer .top .flex .right .newsletter-box{position:relative; border:3px solid #e78320; padding:30px 10px; text-align:center; border-radius:10px;}
.yellow-footer .top .flex .right .newsletter-box:hover{background:#e78320;}
.yellow-footer .top .flex .right .newsletter-box .nl-title{position:relative; display:inline-block; color:#222; font-weight:bold; margin-bottom:10px;}
.yellow-footer .top .flex .right .newsletter-box .nl-title img{position:relative; display:inline-block; vertical-align:middle; margin-right:5px; max-width:25px;}

.yellow-footer .top .flex .right .newsletter-box label{display:none !important;}
.yellow-footer .top .flex .right .newsletter-box input[type="email"]{position:relative; display:inline-block; border-radius:10px; background:#fff; border:0; margin-bottom:10px; text-align:center; width:260px;}
.yellow-footer .top .flex .right .newsletter-box input[type="submit"]{position:relative; display:inline-block; background:#65942b !important; color:#fff; font-weight:bold; border-radius:10px; border:0 !important;}
.yellow-footer .top .flex .right .newsletter-box input[type="submit"]:hover{background:#222 !important; cursor:pointer;}
.yellow-footer .wave-bg{position:absolute; bottom:0; left:0; width:100%; height:100%; background:url(../img/footer/wave-bg.png) no-repeat bottom center; background-size:cover; z-index:-1;}
.yellow-footer .bottom{position:relative; background:#e78320; padding:30px 0; box-shadow: inset 0px 20px 25px -10px rgba(0, 0, 0, 0.25);}
.yellow-footer .bottom .flex{position:relative; display:flex; justify-content:space-between;}
.yellow-footer .bottom .flex .left{position:relative; width:48%; color:#fff;}
.yellow-footer .bottom .flex .right{position:relative; width:48%; text-align:right; color:#fff;}
.yellow-footer .bottom .flex .right a{color:#fff; margin-left:15px;}
.yellow-footer .bottom .flex .right a:hover{color:#222;}

.yellow-footer p{margin:0 !important;}
.mc4wp-form-theme{margin:0 !important;}
.mc4wp-success{padding:10px; background:#fff; margin-top:10px; border-radius:10px;}

@media screen and (max-width: 950px) {
	.yellow-footer .top{padding:40px 0;}
	.yellow-footer .top .flex .left, .yellow-footer .top .flex .center, .yellow-footer .top .flex .right{width:29%;}
	.yellow-footer .top .flex .right .newsletter-box input[type="email"]{width:185px;}
	.yellow-footer .top .flex .center .medias{width:150px;}
	.yellow-footer .top .flex .center .medias a{max-width:30px;}
	.yellow-footer .top .flex .left .coords .line .col img{margin-right:10px; max-width:15px;}
	.yellow-footer .top .flex .left .coords .line .col a{font-size:0.9em;}
	.yellow-footer .bottom{padding:15px 0;}
	.yellow-footer .bottom .flex .left, .yellow-footer .bottom .flex .right a{font-size:0.9em;}
}

@media screen and (max-width: 768px) {
	.yellow-footer .top .flex, .yellow-footer .bottom .flex{flex-direction:column;}
	.yellow-footer .top .flex .left, .yellow-footer .top .flex .center, .yellow-footer .top .flex .right{width:96%; text-align:center;}
	.yellow-footer .top .flex .left, .yellow-footer .top .flex .center{margin-bottom:30px;}
	.yellow-footer .top .flex .left .footerlogo{width:90%; max-width:350px;}
	.yellow-footer .top .flex .left .coords{display:inline-table;}
	.yellow-footer .top .flex .left .coords .line .col a{font-size:1em;}
	.yellow-footer .top .flex .center .ms-title{display:block;}
	.yellow-footer .top .flex .right{max-width:350px;}
	.yellow-footer .top .flex .right .newsletter-box input[type="email"]{width:275px;}
	.yellow-footer .bottom .flex .left{width:90%; margin:0 auto 10px; text-align:center;}
	.yellow-footer .bottom .flex .right{width:90%; margin:0 auto; text-align:center;}
	.yellow-footer .bottom .flex .right a{margin:0 5px !important;}
}

/* ------------------------------------------------------------ */


@media (max-width: 767px) {
  footer {
    background-color: #ffb400;
  }
  footer div#footer-nav {
    display: none;
  }
  footer div.infocontact {
    color: white;
    margin-top: 38px;
  }
  footer div.infocontact strong {
    padding-left: 20px;
  }
  footer div.infocontact a {
    color: white;
  }
  footer div#social {
    display: block;
    float: right;
    padding-right: 20px;
  }
  footer div#social a {
    display: inline-block;
    width: 55px;
    height: 55px;
    text-indent: -9999em;
    margin: 20px 0 20px 10px;
  }
  footer div#social a#social-fb {
    background: url('../img/template/footer/facebook.gif') no-repeat;
  }
  footer div#social a#social-yt {
    background: url('../img/template/footer/youtube.gif') no-repeat;
  }
  
  .newsletter-banner .container {
   	width: 95%;
    flex-direction: column;
  }
  
  .newsletter-banner .container > *:first-child,
  .newsletter-banner .container > *:last-child {
   	 width: 100%;
  }
}
@media (max-width: 520px) {
  footer div.infocontact {
    margin-top: 22px;
  }
  footer div.infocontact strong {
    display: block;
    margin-bottom: 5px;
    font-size: 0.9em;
  }
  footer div#social {
    display: block;
    float: right;
    padding-right: 20px;
  }
  footer div#social a {
    width: 40px;
    height: 40px;
    text-indent: -9999em;
    margin: 20px 0 20px 10px;
    background-size: contain;
  }
  
  .newsletter-banner h2 {
   	font-size: 2.5rem; 
  }
  
  .newsletter-banner .mc4wp-form-theme label {
   	font-size: 1.5rem; 
  }
}
@media (min-width: 768px) {
  footer {
    background: url('../img/template/footer/bg.gif') repeat-x center bottom;
    padding-bottom: 20px;
    padding-top: 20px;
    position: relative;
  }
  footer div#footer-nav {
    display: none;
  }
  footer div#footer-banner {
    height: 277px;
    background: url('../img/template/footer/banner.jpg') repeat-x center top;
  }
  footer div.container {
    position: relative;
    padding-bottom: 10px;
    min-height: 100px;
  }
  footer div.infocontact {
    position: absolute;
    right: 0;
    bottom: 0;
    color: white;
  }
  footer div.infocontact strong {
    padding-left: 20px;
  }
  footer div.infocontact a {
    color: white;
  }
  footer div#social {
    display: block;
    position: absolute;
    top: -18px;
    right: 0;
    padding: 0 0 0 20px;
  }
  footer div#social a {
    display: inline-block;
    width: 55px;
    height: 55px;
    text-indent: -9999em;
    margin: 20px 0 25px;
  }
  footer div#social a#social-fb {
    background: url('../img/template/footer/facebook.gif') no-repeat;
  }
  footer div#social a#social-yt {
    background: url('../img/template/footer/youtube.gif') no-repeat;
  }
}
@media (min-width: 980px) {
  footer div#footer-nav {
    display: block;
  }
  footer div.container {
    padding-bottom: 10px;
  }
  footer div.row {
    min-height: 246px;
  }
  footer div.row div.span2 {
    background: url('../img/template/footer/sep.gif') no-repeat left center;
    min-height: 210px;
    margin-left: 0;
    padding-left: 24px;
    padding-right: 24px;
  }
  footer div.row div.span2.contact {
    background: url('../img/template/footer/sep.gif') no-repeat left center, url('../img/template/footer/sep.gif') no-repeat right center;
  }
  footer div.row div.span2.nosep {
    background: none;
    padding-left: 20px;
    padding-right: 0px;
    width: 100px;
  }
  footer div.infocontact {
    position: absolute;
    right: 0;
    bottom: 0;
    color: white;
  }
  footer div.infocontact strong {
    padding-left: 20px;
  }
  footer div.infocontact a {
    color: white;
  }
  footer div#social {
    display: block;
    position: absolute;
    top: 20px;
    right: 10px;
  }
  footer div#social a {
    display: block;
  }
  footer h1 {
    display: none;
  }
  footer h2,
  footer h2 a {
    color: #fff;
    font-size: 16px;
    font-size: 1.6rem;
    text-transform: uppercase;
    font-family: 'TitilliumText22LXBold', Arial, sans-serif;
    line-height: 1.5em;
  }
  footer h2 a:hover {
    color: black;
    text-decoration: none;
  }
  footer ul {
    list-style-type: none;
    margin: -5px 0 40px 0;
  }
  footer ul li {
    margin-bottom: 10px;
    line-height: 1.2em;
  }
  footer ul li a {
    font-size: 15px;
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
  }
  footer ul li a:hover {
    color: black;
    text-decoration: none;
  }
 
}

.video-container{position:relative; width:100%; padding-bottom:55%; margin-bottom:30px;}
.video-container iframe{position:absolute; width:100%; height:100%; top:0; left:0;}

.pum-container.popmake {
  background-image: url(https://www.moncamp.com/wp-content/uploads/2024/08/KLJ9288-1-scaled.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat; 
}

.pum-container.popmake::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: .3;
}

/* ------------------------------------------------------------ */
/* -
/* --> Bouton d'Inscription Sticky
/* -
/* ------------------------------------------------------------ */
.bouton-inscription-sticky {
    /* Positionnement Sticky */
	position: fixed;
    bottom: 100px; /*100px du bas de la fenêtre*/
    right: 20px;  /*20px de la droite de la fenêtre*/
    z-index: 9999; /*Assurez-vous qu'il est au-dessus de tout (y compris z-index 4600 et 9000 déjà vus)*/

    /* Design */
    background-color: #cc0000; /* Rouge */
    color: #FFFFFF; /* Texte Blanc */
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 15px 25px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Ombre plus visible */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Effet au survol de la souris */
.bouton-inscription-sticky:hover {
    background-color: #990000;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Ombre plus prononcée */
}

/* Ajustement bouton inscription pour les petits écrans (Mobile) */
@media (max-width: 600px) {
    .bouton-inscription-sticky {
        /* Positionnement */
        bottom: 15px; /* Légèrement plus bas que 10px pour le pouce */
        right: 15px;  /* Marge de droite */
        left: auto;   /* Annule l'extension sur toute la largeur */
        
        /* Taille et Alignement */
        width: 60%; /* Réduit la largeur pour laisser de la place au widget de chat */
        max-width: 250px; /* Assure une taille maximale raisonnable */
        padding: 12px 20px;
        font-size: 16px;
        
        /* Assure que le texte reste centré dans le bouton */
        text-align: center; 
    }
}