/*
Theme Name: Youth&Co
Author: Rhazael
Author URI: https://rhazael.fr
Description: Thème Youth&Co by CFDT Air France
Version: 1.0
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}



/* Preconfigs */

:root {

  /* Couleurs */

  --cgold   : #B69447;       /* Gold flat */
  --cb      : #F07C1A;       /* Blanc */
  --cgris1  : #707070;       /* Gris anthracite */
  --cgris2  : #C8C8C8;       /* Gris clair */
  --cblack  : #2D2D2D;       /* Noir grisé */
  --cinput  : #F1E6D0;       /* Gold clair input */


  /* Dégradé gold bg */

  --gold : linear-gradient(90deg, rgba(172,137,63,1) 0%, rgba(207,175,102,1) 20%, rgba(254,248,205,1) 50%, rgba(209,188,128,1) 80%, rgba(172,137,63,1) 100%);

  /* Dégradé fumé gris */

  --dgd : linear-gradient(0deg, rgba(0,0,0,0.57) 0%, rgba(105,105,105,0.16) 30%, rgba(255,255,255,0) 100%);


  /* Fonts */

  --p1 : "Dolce-Vita", sans-serif;
  --p2 : "TitilliumWeb", sans-serif;

}

body {
  font-family: var(--p2);
  color: var(--cgris1);
}

a {
  transition: all ease .2s;
  text-decoration: none;
}

p {
  font-family: var(--p2);
  font-size: 17px;
  letter-spacing: 1px;
  line-height: 29px;
}

strong { font-weight: bold; }

p > a,
span > a {
  color: #f57604;
  position: relative;
}

p > a:hover,
span > a:hover {
  color: #f3ae29;
}

p > a::after,
span > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
}

h1,h2,h3,h4 {
  font-family: var(--p1);
  color: var(--cblack);
}

h5,h6 {
  font-family: var(--p2);
  color: var(--cblack);
}


h1.titre {
  font-size: 90px;
  letter-spacing: 3px;
  margin: 10px 0;
  text-align: center;
}

h1.titre-voyages { text-align: center; }

.mt95 {
  margin-top: 95px;
}

.mb95 {
  margin-bottom: 95px;
}

span.fil {
  font-family: var(--p1);
  text-align: center;
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--cgold);
  margin: 10px 0;
  display: block;
}


#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.dpf    { display: flex; }
.fac    { align-items: center; }
.fjc    { justify-content: center; }
.fdc    { flex-direction: column; }

.w100   { width: 100%; }

.font1,
span .font1,
p .font1 {
  font-family: var(--p1);
}

.font2,
span .font2,
p .font2 {
  font-family: var(--p2);
}

.font-size-20 { font-size: 20px;}
.font-size-42 { font-size: 42px;}
.kingsize     { font-size: 100px;}


.trix-blanc p {
  background-color: #fff;
  border: 15px solid #FFF;
}

.bg-dgd::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--dgd);
}

.template-container {
  max-width: 1160px;
  width: 100%;
  padding: 20px 0;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}

.template-container-search {
  min-height: 40vh;
}

.no-content-atm {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  width: 100%;
  max-width: 600px;
  min-height: 300px;
  gap: 30px;
  line-height: 20px;
  border: 2px dashed #cccccc;
  padding: 20px;
  border-radius: 50px;
  background-color: #fff;
}

.no-content-atm h2 {
  font-size: 35px;
  line-height: 35px;
}

p.error {
  text-align: center;
  margin-bottom: 10px;
}



/* Menu */


#branding { height: 90px; }

#menu {
  display: flex;
  position: fixed;
  background-color: rgba(255,255,255,0.9);
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 25px;
  z-index: 200;
  backdrop-filter: blur(5px);
}

#menu a {
  font-family: var(--p1);
  font-size: 22px;
  text-transform: uppercase;
  color: var(--cgris1);
}

#menu .home-nav {
  display: flex;
  align-items: center;
  position: absolute;
  left: 30px;
}

#menu .mid-nav > ul {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 50px;
}


#menu-menu-principal > li:first-child,
#menu-menu-principal > li:last-child {
  position: relative;
}

#menu-menu-principal > li:first-child::after,
#menu-menu-principal > li:last-child::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 25px;
  background-color: var(--cblack);
  top: 10px;
  right: -35px;
}

#menu-menu-principal > li:last-child::after {
  left: -35px;
}



#menu .mid-nav #menu-item-55 > a {
  font-size: 30px;
  position: relative;
}

#menu .mid-nav #menu-item-55 > a::before {
  content: "";
  position: absolute;
  bottom: -5px;
  height: 1px;
  width: 100%;
  background: var(--gold);
}

#menu .mid-nav .sub-menu {
  display: none;
}

#menu .user-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  position: absolute;
  right: 30px;
}

.nav-caf > img {
  height: 60px;
}

.home-nav img {
  height: 75px;
}

.user-nav .login-home {
  position: relative;
  top: inherit;
  right: inherit;
  margin-left: 15px;
  
}

.user-nav .login-home > ul {
  display: none;
  border-radius: 15px 0 15px 15px;
  background-color: rgba(255, 255, 255, 1);
  overflow: hidden;
}

.user-nav .login-home:hover > ul {
  display: flex;
}



#menu .user-nav .login-home > ul a {
  font-size: 14px;
}

/*burger*/

.menu-burger {
  display: none;
}

.menu-burger > a > img {
  height: 55px;
}

.bouton-burger {
  height: 100%;
  width: 70px;
  position: relative;
  z-index: 120;
}

.hamburger {
  width: 30px;
  height: 30px;
  position: relative;
  margin: 0 0 0 18px;
}

.hamburger::after {
  content: "Menu";
  position: absolute;
  left: -65px;
  top: 6px;
  font-size: 18px;
}

.bouton-burger.active .hamburger::after {
  content: "Fermer";
}

.hamburger .bar {
  padding: 0;
  width: 30px;
  height: 4px;
  background-color: var(--cgold);
  display: block;
  border-radius: 4px;
  transition: all 0.4s ease-in-out;
  position: absolute; 
}

.bar1 { top: 0;}
.bar2,
.bar3 { top: 12.5px;}
.bar3 { right: 0;}
.bar4 { bottom: 0;}

.bouton-burger.active .hamburger2 > .bar1{
  transform: translateX(40px);
  background-color: transparent;
}
.bouton-burger.active .hamburger2 > .bar2{
  transform: rotate(45deg);
}

.bouton-burger.active .hamburger2 > .bar3{
  transform: rotate(-45deg);
}

.bouton-burger.active .hamburger2 > .bar4{
  transform: translateX(-40px);
  background-color: transparent;
}

/* Menu premiere */

.menu-premiere {
  display: flex;
  position: absolute;
  top: 60px;
  justify-content: center;
  overflow: hidden;
  min-height: 60px;
}

#menu .menu-premiere a {
  font-size: 0;
  width: 40px;
  height: 40px;
  display: block;
  border: 1px solid var(--cgold);
  transition: all ease .1s;
}

#menu .menu-premiere a:hover {
  transform: scale(1.2);
}

.menu-premiere ul {
  display: flex;
  gap: 20px;
  padding: 10px 20px;
  position: relative;
  margin-top: -80px;
  transition: all ease .2s;
}

#menu:hover .menu-premiere ul {
  margin-top: 0;
}

#menu .menu-premiere li {
  background-color: #fff;
}

#menu .menu-premiere li a {
  background-image: url("https://youthandco.fr/template/images/icone-premiere-voyage.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}

#menu .menu-premiere li#menu-item-1942 a {
  background-image: url("https://youthandco.fr/template/images/icone-premiere-partenariat.png");
}
#menu .menu-premiere li#menu-item-1940 a {
  background-image: url("https://youthandco.fr/template/images/icone-premiere-events.png");
}
#menu .menu-premiere li#menu-item-1941 a {
  background-image: url("https://youthandco.fr/template/images/icone-premiere-promos.png");
}
#menu .menu-premiere li#menu-item-1943 a {
  background-image: url("https://youthandco.fr/template/images/icone-premiere-annonces.png");
}
#menu .menu-premiere li#menu-item-1944 a {
  background-image: url("https://youthandco.fr/template/images/icone-premiere-suggestions.png");
}

/* user menu */



/* login form wp */

#loginform {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#loginform > p {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#loginform > p input {
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
  color: var(--cgold);
  font-size: 16px;
  font-weight: inherit;
  letter-spacing: 1px;
}

#loginform > p input#wp-submit {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.login-remember label {
  font-size: 15px;
}


/* 404 */

.error404 h1 {
  text-align: center;
  font-size: 36px;
  margin-bottom: 15px;
}

.p404 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.message-p404 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.message-p404 img {
  width: 530px;
}

.nav-404 {
  display: flex;
  gap: 30px;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.nav-404 a {
  padding: 10px 20px;
  border: 1px solid var(--cgold);
  font-size: 16px;
  text-transform: uppercase;
  color: #555;
}


/****** ACCUEIL ******/

/*fix*/
/* html {margin: 0 !important;} */
/* .home #wpadminbar {display: none !important;} */

.home #header {
  transition: all ease .3s;
  position: absolute;
}


 .home #header.menuF {
  top: 0px;
}

.home #header.menu {
  top: -90px;
}

.header-home {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
  padding-bottom: 70px;
  /*background-image: url("images/bg-header-home.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.login-home {
  display: flex;
  position: absolute;
  top: 20px;
  right: 20px;
  height: 40px;
  width: 40px;
}

.login-home > ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 180px;
  font-size: 14px;
  border-radius: 15px 0 15px 15px;
  text-transform: uppercase;
  right: 0;
  top: 40px;
  text-align: right;
  transition: all ease .2s;
  opacity: 0;
  border: 1px solid #ccc;
  background-color: #ffffff;
  overflow: hidden;
}

.login-home:hover > ul {
  display: flex;
  opacity: 1;
}

.login-home > ul li {
  padding: 12px;
}

.login-home > ul a {
  color: var(--cgold);
  display: block;
}



.header-home h1 img {
  max-height: 420px;
  height: 750px;
  width: 650px;
  margin-left: 40%;
  margin-bottom: 40px;
}

.parahomeheader {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  z-index: -1;
}

.header-home .separation-gold {
  height: 1px;
  width: 30%;
  width: 35%;
  max-width: 440px;
}

.menu-homepage {
  display: flex;
  gap: 60px;
  justify-content: center;
  align-items: flex-end;
  margin-top: 25px;
}

.menu-homepage li {
  display: flex;
}

.menu-homepage a {
  font-size: 20px;
  color: var(--cgris1);
  font-family: var(--p1);
  letter-spacing: 1px;
}

.menu-homepage .premiere-homepage-menu a {
  font-size: 42px;
  color: #1A2259;
  margin-bottom: -5px;
  background:var(--gold);
  background-size: 300% 300%;
  animation: rainbow 7s ease-in-out infinite;
  background-clip: text;
  -webkit-background-clip:text;
  transition: color .2s ease-in-out;
}

.menu-homepage .premiere-homepage-menu a:hover {
  color:rgba(0,0,0,0);
}

@keyframes rainbow {
  0%{background-position:left}
  50%{background-position:right}
  100%{background-position:left}
}

.menu-homepage .premiere-homepage-menu {
  position: relative;
}

.menu-homepage .premiere-homepage-menu::before,
.menu-homepage .premiere-homepage-menu::after {
  position: absolute;
  content: "";
  height: 2px;
  width: 22px;
  background-color: var(--cgris1);
  top: 25px;
  left: -40px;
}

.menu-homepage .premiere-homepage-menu::after {
  left: inherit;
  right: -40px;
}

.last-actu {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.bg-dgd > img {
  position: absolute;
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: -35%;
  z-index: 1;
}

.last-actu > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 500px;
  max-width: 1600px;
  position: relative;
  padding: 50px 20px;
}

.last-actu > div::before,
.last-actu > div::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 502px;
  left: 0;
  top: 0;
  background-image: url("images/over-g-last.png");
  background-repeat: no-repeat;
  background-size: 45% 100%;
  background-position: -16% 50%;
  overflow: hidden;
  z-index: 2;
}

.last-actu > div::after{
  left: 50%;
  background-image: url("images/over-r-last.png");
  background-position: 120% 50%;
}

.last-actu .spactu,
.last-actu h3,
.last-actu .separation-gold,
.date-last-actu,
.last-actu a {
  z-index: 5;
}

.last-actu .spactu {
  font-family: var(--p2);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--cgold);
}

.last-actu h3 {
  font-family: var(--p1);
  color: #fff;
  font-size: 36px;
  filter: drop-shadow(0px 0px 3px black);
  text-align: center;
}

.last-actu .separation-gold {
  width: 100%;
  max-width: 400px;
}

.date-last-actu {
  font-size: 16px;
  color: #fff;
  filter: drop-shadow(0px 0px 3px black);
}

.last-actu a {
  padding: 15px;
  text-transform: uppercase;
  font-size: 18px;
  background-color: var(--cgold);
  color: #fff;
}

.separation-cartes-home {
  display: flex;
  justify-content: center;
  margin: 50px 0;
}

.separation-cartes-home > img {
    height: 140px;
}

.ctn-home {
  width: 100%;
  display: flex;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.part-home {
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}

.part-home h2 {
  font-size: 100px;
  color: var(--cblack);
}

.part-home .separation-gold {
  flex: 1;
  height: 2px;
}

.derniers-articles {
  margin: 50px auto;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}

.derniers-articles a {
  flex: 1 33%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 370px;
  gap: 10px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.derniers-articles .bon-plan-ftr {
  z-index: 1;
}

.derniers-articles .spactu {
  font-size: 18px;
  color: var(--cgold);
  z-index: 2;
}

.derniers-articles .separation-gold {
  z-index: 2;
  filter: drop-shadow(0px 0px 3px black);
}

.derniers-articles h3 {
  font-size: 26px;
  color: #FFF;
  z-index: 2;
  filter: drop-shadow(0px 0px 3px black);
}

.derniers-articles .date-last-actu {
  color: #FFF;
  font-size: 12px;
  z-index: 2;
  filter: drop-shadow(0px 0px 3px black);
}

.derniers-articles .ctarticle {
  padding: 15px 20px;
  z-index: 2;
  background-color: var(--cgold);
  color: #FFF;
  font-size: 18px;
  transition: all .3s;
  text-transform: uppercase;
  filter: drop-shadow(0px 0px 3px black);
}

.derniers-articles a:hover .ctarticle {
  padding: 15px 30px;
}

.non-dispo {
  opacity: 40%;
}


/****** VOYAGES *******/

#content-slider-voyages {
  width: 100%;
  display: block;
  position: relative;
  background-image: url("https://youthandco.fr/wp-content/uploads/voyages-slider-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body .swiper-voyages {
  width: 100%;
  max-width: 1280px;
  padding-top: 50px;
  padding-bottom: 50px;
  height: 800px;
  margin: auto;
  margin-bottom: 50px;
  overflow: hidden;
}


body .swiper-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 400px;
  height: 650px;
  border-radius: 250px;
  position: relative;
  display: flex;

}

.swiper-button-next:after,
.swiper-button-prev:after {
  filter: drop-shadow(0px 0px 2px black);
  color: var(--cgold);
}

.swiper-slide > a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 80px;
  gap: 10px;
  z-index: 3;
}

.voyages-title-slide {
  font-family: var(--p1);
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: center;
  font-size: 36px;
  filter: drop-shadow(0px 0px 3px black);
}

.pays-slider-description {
  font-family: var(--p2);
  color: #FFFFFF;
  text-transform: uppercase;
  text-align: center;
  font-size: 17px;
}

.separation-gold {
  width: 110px;
  height: 3px;
  background: var(--gold);
  margin-left: auto;
  margin-right: auto;
}

h1.titre~.separation-gold {
  height: 2px;
  width: 510px;
  margin-bottom: 70px;
}

body .swiper-slide::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--dgd);
  border-radius: 250px;
}

body .swiper-slide:first-child {

}

.page-template-voyages-template-acc .bonsplans-container > a:first-child {
  flex: 1;
  font-size: 28px;
}

.page-template-voyages-template-acc .bonsplans-container > a {
  min-width: 250px;
}

.content-article .elementor-icon-list-item a .elementor-icon-list-text {
  border-bottom: 1px solid var(--cgold);
  padding-right: 5px;
}

.voyage-template-default .elementor-divider-separator h3 {
  position: relative;
}

.voyage-template-default .elementor-divider-separator h3::after {
  content: "";
  position: absolute;
  left: -55px;
  top: 5px;
  height: 35px;
  width: 35px;
  background-image: url("images/puce.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* fix */

.page-template-voyages-template-acc .bonsplans-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.page-template-voyages-template-acc .bonsplans-container a {
  height: 340px;
  min-width: inherit;
  color: #FFF;
  font-family: var(--p1);
  font-size: 28px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  transition: all .5s;
  overflow: hidden;
}


/******** SUGGESTIONS ***********/


.suggestion-form {

}

.suggestion-form .nf-form-title,
.suggestion-form .nf-before-form-content {
  display: none;
}

.suggestion-form .nf-field-label label {
  font-family: var(--p2);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--cgris1);
  font-weight: inherit;
}

body .nf-form-content .list-select-wrap .nf-field-element>div,
body .nf-form-content input:not([type=button]),
body .nf-form-content textarea {
  border: 0;
  background-color: #F1E6D0;
  color: var(--cgris1);
}

body .nf-form-content button,
body .nf-form-content input[type=button],
body .nf-form-content input[type=submit] {
  color: #FFFFFF;
  background-color: var(--cgold);
  text-transform: uppercase;
  padding: 15px 25px;
}

body .nf-form-content .list-select-wrap .nf-field-element>div:focus,
body .nf-form-content input:not([type=button]):focus,
body .nf-form-content textarea:focus {
  background-color: #f9f7f4;
}


/*********** FOOTER ***********/


footer {
    display: flex;
    justify-content: center;
    margin: 80px 0 40px 0;
    width: 100%;
    padding: 0 3vw;
}

.menu-footer-menu-container { width: 100%; }

#menu-footer-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    font-size: 16px;
    gap: 40px;
    text-transform: uppercase;
    position: relative;
    font-family: var(--p1);
}

#menu-footer-menu a {
  color: var(--cgris1);
}

#menu-footer-menu a:hover {
  color: var(--cgold);
}

#menu-footer-menu li:first-child {
  position: absolute;
  top: -48px;
  margin: auto;
  width: 100%;
  max-width: 520px;
  height: 35px;
}

#menu-footer-menu li:first-child a {
  height: 100%;
  width: 100%;
  display: block;
  background-image: url("https://youthandco.fr/wp-content/uploads/footer-home.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-size: 0;
}

#copyright {
  position: absolute;
  right: 40px;
  text-transform: uppercase;
  font-size: 14px;
}




/******* Premiere **********/


h1.titre-premiere {
  margin-top: 32px;
  margin-bottom: 32px;
}

.bienvenue-premiere {
  width: 100%;
  padding: 0px 20px;
  margin: 0px;
  text-align: center;
}

.page-premiere p {
  line-height: inherit;
}

.page-template-template-premiere .entry-content {
  /* background-image: url("images/bg-concept.jpg");
  background-size: 60%; */
}

#nav-premiere {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* max-width: 1160px; */
  margin-right: auto;
  margin-left: auto;
  background-image: url("images/bg-concept.jpg");
  background-size: 60%;
  background-attachment: fixed;
}

#nav-premiere ul {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* max-width: 1160px; */
  flex-direction: inherit;
  margin-right: auto;
  margin-left: auto;
  gap: 30px;
  flex-wrap: wrap;
  padding: 30px;
}


#nav-premiere li a {
  opacity: 0;
  width: 200px;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  border: 1px solid #ddd;
  font-family: var(--p1);
  font-size: 23px;
  color: #2d2d2d;
}

#nav-premiere li {
  transition: all ease .5s;
  background-color: #fff;

}

#nav-premiere li:hover{
  transform: translateY(-15px);
}

#nav-premiere li a img {

}

.articles-adherents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1280px;
  width: 100%;
  padding: 0 25px;
  margin-right: auto;
  margin-left: auto;
}

.container-article-adherents {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
  width: 100%;
}

.aa-title {
  margin: 60px 0;
}

.aa-title h2 {
  text-align: center;
  font-size: 40px;
}

.container-article-adherents > a {
  width: 33%;
  /*max-width: 340px;*/
  height: 380px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  padding: 20px;
  flex-direction: column;
  position: relative;
}

.suite-liste-aa {
  display: flex;
  align-items: center;
}

.dehanch {
  width: 33%;
  border: 1px solid var(--cgold);
  background-image: url(images/bg-concept.jpg);
  background-size: 60%;
  background-attachment: fixed;
}

.laadh {
  display: flex;
  width: 67%;
  flex-direction: column;
  gap: 20px;
}

.articles-adh-suite {
  display: flex;
  width: 100%;
  gap: 30px;
  margin-bottom: 40px;
}

.articles-adh-suite a:first-child {
  width: 160px;
  min-height: 80px;
}

.articles-adh-suite a:first-child div {
  height: 100%;
  min-height: 80px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.aa-titre-offset {
  font-size: 22px;
  width: 100%;
  padding-left: 20px;
}

.container-article-adherents .bg-dgd {
  z-index: 1;
}

.container-article-adherents .spactu,
.container-article-adherents h2,
.container-article-adherents .separation-gold,
.container-article-adherents .ctarticle {
  z-index: 2;
}

.container-article-adherents h2 {
  font-size: 26px;
  color: #FFF;
  z-index: 2;
  filter: drop-shadow(0px 0px 3px black);
}

.container-article-adherents .ctarticle {
  padding: 15px 20px;
  z-index: 2;
  background-color: var(--cgold);
  color: #FFF;
  font-size: 18px;
  transition: all .3s;
  text-transform: uppercase;
}




/******* BONS PLANS *******/


.bonsplans-container {
  max-width: 1160px;
  width: 100%;
  padding: 20px 0;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("https://youthandco.fr/wp-content/uploads/bg-suggestions.png");
  margin-top: 60px;
  flex-direction: column;
  gap: 20px;
}

.bpcf {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}



.bpcf > a {
  height: 340px;
  min-width: 330px;
  flex: 1;
  /* background-repeat: no-repeat;
  background-size: 100% 340px;
  background-position: center; */
  color: #FFF;
  font-family: var(--p1);
  font-size: 28px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  transition: all .5s;
  overflow: hidden;
}

.bpcf-s {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.bpcf-s > a {
  height: 220px;
  min-width: inherit;
  flex: inherit;
  width: auto;
  font-size: 22px;
}

.bpcf > a::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--dgd);
}

.bpcf > a:hover .bon-plan-ftr,
a:hover .bon-plan-ftr {
  transform: scale(1.1);
}


.bon-plan-ftr {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: all .5s;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}



.bpcf > a:first-child {
  width: 100%;
  /* background-size: 100% auto; */
  font-size: 36px;
  flex: 1 100%;
}

.bpcf-s > a:first-child {
  width: auto;
  font-size: 22px;
  flex: inherit;
}

.bpcf > a:hover:first-child {
  background-size: 110% auto;
}

.titre-bonplans-link {
  margin-bottom: 15px;
  z-index: 6;
  position: relative;
  filter: drop-shadow(0px 0px 2px black);
}

.bpcf .separation-gold {
  z-index: 6;
  position: relative;
}


/******** Evenements page ********/


.events-container {
  max-width: 1060px;
  width: 100%;
  margin-top: 80px;
  margin-bottom: 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 30px;
  margin-left: auto;
  margin-right: auto;
  min-height: 40vh;
}

.events-container > a {
  width: 100%;
  min-height: 200px;
  position: relative;
  color: var(--cblack);
  padding: 0 0 0 0;
  overflow: hidden;
  padding: 30px 0;
}

.events-container .event-cadre {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items:flex-end;
  justify-content: center;
  height: 100%;
  position: relative;
  z-index: 3;
}

.event-cadre-img-feat {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: all ease .4s;
  z-index: 2;
}

.events-container > a:hover .event-cadre-img-feat {
  width: 105%;
}

.event-cadre > div {

  padding: 15px 70px 15px 25px;
  text-align: right;
}


.titre-cadre {
  font-family: var(--p1);
  font-size: 30px;
  max-width: 50%;
  background-color: #fff;
}

.lieu-cadre {
  color: #fff;
  text-transform: uppercase;
}


.date-cadre-timeline {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.date-cadre-timeline > span {
  border: 1px solid #ddd;
  margin-right: 50px;
  position: relative;
}

.date-cadre-timeline div {
  position: relative;
  z-index: 5;
  padding: 20px;
  color: #fff;
  font-size: 18px;
  margin-bottom: -50px;
  background-color: var(--cgold);
}

.date-cadre-timeline div::first-letter{
  text-transform: uppercase;
}

.date-cadre-timeline > span::before {
  content: "";
  position: absolute;
  bottom: -30px;
  right: 60px;
  width: 2px;
  height: calc(100% + 60px);
  background-color: var(--cgold);
  z-index: 4;
}

.date-cadre-timeline:first-child > span::before {
  height: calc(100% + 30px);
}

/* .line-timeline {
  height: 1px;
  width: 120px;
  background-color: #ddd;
} */


/* test */

.the-arrow {
	 width: 1px;
	 transition: all 0.2s;
}
 .the-arrow.-left {
	 position: absolute;
	 top: 54%;
	 left: 5%;
}
 .the-arrow.-left > .shaft {
	 width: 0;
	 background-color: #fff;
}
 .the-arrow.-left > .shaft:before, .the-arrow.-left > .shaft:after {
	 width: 0;
	 background-color: #fff;
}
 .the-arrow.-left > .shaft:before {
	 transform: rotate(0);
}
 .the-arrow.-left > .shaft:after {
	 transform: rotate(0);
}
 .the-arrow.-right {
	 top: 3px;
}
 .the-arrow.-right > .shaft {
	 width: 1px;
	 transition-delay: 0.2s;
}
 .the-arrow.-right > .shaft:before, .the-arrow.-right > .shaft:after {
	 width: 8px;
	 transition-delay: 0.3s;
	 transition: all 0.5s;
}
 .the-arrow.-right > .shaft:before {
	 transform: rotate(40deg);
}
 .the-arrow.-right > .shaft:after {
	 transform: rotate(-40deg);
}
 .the-arrow > .shaft {
	 background-color: #4c4c4c;
	 display: block;
	 height: 1px;
	 position: relative;
	 transition: all 0.2s;
	 transition-delay: 0;
	 will-change: transform;
}
 .the-arrow > .shaft:before, .the-arrow > .shaft:after {
	 background-color: #fff;
	 content: '';
	 display: block;
	 height: 1px;
	 position: absolute;
	 top: 0;
	 right: 0;
	 transition: all 0.2s;
	 transition-delay: 0;
}
 .the-arrow > .shaft:before {
	 transform-origin: top right;
}
 .the-arrow > .shaft:after {
	 transform-origin: bottom right;
}
 .animated-arrow {
	 display: inline-block;
	 color: #fff;
	 font-size: 1.25em;
	 text-decoration: none;
	 position: relative;
	 transition: all 0.2s;
}

.events-container > a:hover .animated-arrow > .the-arrow.-left > .shaft {
	 width: 64px;
	 transition-delay: 0.1s;
	 background-color: #fff;
}
.events-container > a:hover .animated-arrow > .the-arrow.-left > .shaft:before,
.events-container > a:hover .animated-arrow > .the-arrow.-left > .shaft:after {
	 width: 8px;
	 transition-delay: 0.1s;
	 background-color: #fff;
}
.events-container > a:hover .animated-arrow > .the-arrow.-left > .shaft:before {
	 transform: rotate(40deg);
}
.events-container > a:hover .animated-arrow > .the-arrow.-left > .shaft:after {
	 transform: rotate(-40deg);
}
.events-container > a:hover .animated-arrow > .main-a {
	 transform: translateX(17px);
	 transform: translateX(80px);
}
.events-container > a:hover .animated-arrow > .main-a > .the-arrow.-right > .shaft {
	 width: 0;
	 transform: translateX(200%);
	 transition-delay: 0;
}
.events-container > a:hover .animated-arrow > .main-a > .the-arrow.-right > .shaft:before,
.events-container > a:hover .animated-arrow > .main-a > .the-arrow.-right > .shaft:after {
	 width: 0;
	 transition-delay: 0;
	 transition: all 0.1s;
}
.events-container > a:hover .animated-arrow > .main-a > .the-arrow.-right > .shaft:before {
	 transform: rotate(0);
}
.events-container > a:hover .animated-arrow > .main-a > .the-arrow.-right > .shaft:after {
	 transform: rotate(0);
}
.animated-arrow > .main-a {
	 display: flex;
	 align-items: center;
	 transition: all 0.2s;
}
 .animated-arrow > .main-a > .text {
	 margin: 0 50px 0 0;
	 line-height: 1;
}
 .animated-arrow > .main-a > .the-arrow {
	 position: relative;
}


.events-container .no-content-atm,
.bonsplans-container .no-content-atm {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}



/*********** Templates articles ***********/


.back-navigation {
  color: var(--cgold);
  background-color: #FFF;
  padding: 20px 30px;
  text-transform: uppercase;
  position: fixed;
  z-index: 8;
  font-size: 26px;
  border-left: 8px solid var(--cgold);
}

.back-navigation:hover{
  color: #FFF;
  background-color: var(--cgold);
  padding-left: 60px;
}

.back-navigation::before{
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 33px;
  border-color: #FFF transparent #FFF transparent;
  top: 0;
  right: -33px;
  transition: all ease .2s;
}

.back-navigation:hover::before {
  border-color: var(--cgold) transparent var(--cgold) transparent;
}





/*** Articles ***/

.container-featured-img {
  height: 470px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.container-featured-img::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--dgd);
}

.news {
  max-width: 1280px;
  margin: auto;
  position: relative;
  padding: 40px 0;
}

.content-main-article {
  width: 100%;
  max-width: 1080px;
  margin: -100px auto 30px auto;
  background-color: #FFFFFF;
  padding: 40px 60px;
  z-index: 5;
  position: relative;
}

.head-article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.entry-date {
  color: var(--cgris1);
  margin-top: 20px;
}

.head-article h1,
.sous-titre-article {
  color: var(--cgris3);
  font-size: 60px;
  text-align: center;
  text-transform: uppercase;
}

.head-article .separation-gold {
  width: 40%;
  margin-top: 20px;
}

.sous-titre-article {
  font-size: 23px;
  font-family: var(--p2);
}

.content-article {
  margin-top: 50px;
  position: relative;
  min-height: 450px;
}

.content-article p {
  font-size: 17px;
  line-height: 26px;
  color: #333;
}

.content-article a {
  color: var(--cgold);
  text-decoration: underline;
}

.content-article a:hover{
  color: #a98228;
}

.content-article p em {
  font-style: italic;
}

.content-article .elementor-widget-text-editor ul {
  margin-top: 10px;
}

.content-article .elementor-widget-text-editor ul li {
  list-style: circle;
  list-style-image: url("images/gpuce.svg");
  font-size: 17px;
  line-height: 26px;
  margin-bottom: 10px;
  margin-left: 10px;
  color: #333;
}

.content-article .elementor-widget-text-editor ul li > ul li {
  list-style-image: url("images/gpuced.svg");
}

/**** Voyages *****/



.hashtag-voyage-article {
  font-family: var(--p1);
  color: #FFFFFF;
  text-transform: uppercase;
  transform: rotate(-90deg);
  font-size: 5rem;
  z-index: 2;
  letter-spacing: 12px;
  position: absolute;
  left: -140px;
  top: 32vh;
}

.content-main-article-voyage {
  width: 100%;
  max-width: 1080px;
  margin: -200px auto 30px auto;
}

.head-article-voyage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
  position: relative;
}

.head-article-voyage h1,
.sous-titre-voyage {
  color: #ffffff;
  font-size: 60px;
  text-align: center;

}

.sous-titre-voyage {
  font-size: 23px;
  font-family: var(--p2);
}

.content-article-voyage {
  margin-top: 30px;
  padding: 40px 60px;
  background-color: #FFFFFF;
  position: relative;
  min-height: 450px;
}

.h2-voyage h2 {
  position: relative;
  display: inline-block;
  padding: 50px 50px;
  background-image:url("images/h2-bg1.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #FFF;
}

.h2-voyage {
  position: relative;

}

.h2-voyage::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: url("images/h2-svg.svg");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 215px;
}

.h2v2 h2 {
  background-image: url("images/h2v2-bg.svg");
  color: #333;
  background-size: contain;
}

.h2v3 h2 {
  color: #333;
  background-image: inherit;
  background-color: #FFF;
  padding: 20px;
}

.content-article-voyage::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background:var(--gold);
}

.content-article-voyage::after {
  position: absolute;
  top: 0;
  font-size: 40px;
}

.content-article-voyage h2 {
  font-size: 40px;
  margin: 20px 0;
}

.content-article-voyage p {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

#filigrane {
  position: fixed;
    transform: rotate(45deg);
    font-size: 60px;
    color: #bbb;
    opacity: 0.3;
    right: 40%;
    bottom: 40%;
}


/* navigation fiche voyage */

.cn-wrapper {
  font-size:1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  bottom: -13em;
  left: 50%;
  border-radius: 0;
  margin-left: -13em;
  transform: scale(0);
  transition: all .3s ease;
}
/* class applied to the container via JavaScript that will scale the navigation up */
.opened-nav {
  border-radius: 0;
  bottom: 0;
  transform: scale(1);
}

.cn-button {
  border:none;
  background:none;
  color: white;
  text-align: Center;
  font-size: 1.5em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #FF914D;
  position: fixed;
  left: 50%;
  margin-left: -1.75em;
  bottom: -1.75em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;
  transition: all ease .2s;
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
  background-color: #f56b15;
}

.cn-overlay{
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.6);
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  right:0;
  opacity:0;
  transition: all .3s ease;
  z-index:2;
  pointer-events:none;
}

/* Class added to the overlay via JavaScript to show it when navigation is open */
.cn-overlay.on-overlay{
  pointer-events:auto;
  opacity:1;
}

.cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  transition: border .3s ease;
}

.cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  transform: skew(-50deg) rotate(-70deg) scale(1);
  transition: opacity 0.3s, color 0.3s;
  transition: background ease .4s;
}

.cn-wrapper li a span {
  font-size: 1.1em;
  opacity: 0.7;
}
/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */

.cn-wrapper li:first-child {
  transform: rotate(-10deg) skew(50deg);
}

.cn-wrapper li:nth-child(2) {
  transform: rotate(30deg) skew(50deg);
}

.cn-wrapper li:nth-child(3) {
  transform: rotate(70deg) skew(50deg)
}

.cn-wrapper li:nth-child(4) {
  transform: rotate(110deg) skew(50deg);
}

.cn-wrapper li:nth-child(5) {
  transform: rotate(150deg) skew(50deg);
}

.cn-wrapper li:nth-child(odd) a {
  background-color: #a11313;
  background-color: hsla(0, 88%, 63%, 1);
}

.cn-wrapper li:nth-child(even) a {
  background-color: #a61414;
  background-color: hsla(0, 88%, 65%, 1);
}

/* active style */
.cn-wrapper li.active a {
  background-color: #b72f2f;
}

/* hover style */
.cn-wrapper li.active a:hover,
.cn-wrapper li.active a:active,
.cn-wrapper li.active a:focus {
  background-color: #a52323;
}
.cn-wrapper li:not(.active) a:focus {
  position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
}




/* responsive */

@media screen and (max-width:480px){
  .cn-wrapper{
    font-size:.68em;
  }
  .cn-button{
    font-size:1em;
  }
  .cn-wrapper li {
    font-size:1.52em;
  }
}



/******* bons plans *********/


.bon-plan-template-default .container-featured-img {
  height: 220px;
}

.bon-plan-template-default .content-main-article {
  margin: 40px auto 30px auto;
}

.bon-plan-template-default .timer-article {
  position: absolute;
  bottom: -25px;
  background-color: var(--cgold);
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  z-index: 6;
  padding: 30px;
  max-width: 390px;
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
}



/******** Evenements ********/

.news-event {
  height: 350px;
}

.event-container {
  max-width: 1280px;
  margin: auto;
  position: relative;
  padding: 0 40px;
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  margin-bottom: 40px;
}

.event-infos {
  width: 25%;
  margin-top: -80px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.event-infos > div {
  border: 1px solid #ddd;
  border-left: 4px solid var(--cgold);
  padding: 25px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.event-infos > div.event-date > span {
  font-size: 18px;
  color: #333;
  font-family: var(--p2);
  letter-spacing: 0;
  text-transform: capitalize;
}

.event-infos > div.event-date > span:first-child {
  font-weight: inherit;
}

.label-info-event {
  font-family: var(--p1);
  font-size: 30px;
  margin-bottom: 20px;
  color: var(--cgold);
}

.content-event {
  padding: 40px;
  flex: 1;
  margin-top: -140px;
  background-color: #fff;
}



/****** Adhésion *********/

.formulaire-adh .nf-form-cont {
  padding: 30px;
  border: 1px solid #ddd;
}

.formulaire-adh .nf-form-fields-required {
  display: none;
}

.formulaire-adh .nf-form-title {
  font-size: 30px;
  text-align: center;
  letter-spacing: 1px;
  padding-bottom: 40px;
  display: block;
}

body .nf-pass.field-wrap .nf-field-element:after {
  color: var(--cgold);
}

.formulaire-adh .nf-form-content input[type=submit] {
  margin: auto;
  display: block;
  text-align: center;
}

.liste-adh li.elementor-icon-list-item {
  position: relative;
}

.liste-adh li.elementor-icon-list-item:not(:last-child)::before {
  content: "";
  position: absolute;
  width: 1px;
  height: calc(100% - 35px);
  background-color: var(--cgold);
  left: 20px;
  top: 50px;
}



/***** Contact *******/

.cadre-contact .nf-form-title,
.cadre-contact .nf-form-fields-required {
  display: none;
}

.cadre-contact .nf-form-content nf-fields-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cadre-contact .nf-form-content nf-fields-wrap nf-field {
  flex: 1;
}

.cadre-contact .nf-form-content nf-fields-wrap nf-field:nth-child(0n+1),
.cadre-contact .nf-form-content nf-fields-wrap nf-field:nth-child(0n+2) {
  flex: 1 49%;
}

.cadre-contact .nf-form-content nf-fields-wrap nf-field:nth-child(0n+5) {
  flex: 1 100%;
}

.cadre-contact .nf-form-content nf-fields-wrap nf-field:nth-child(0n+7) {
  flex: 1 100%;
  display: flex;
  justify-content: center;
}


.tree-link ul li a {

}

.tree-link ul li a span:last-child {
  width: 50%;
  padding : 10px 20px;
  margin-right: 40px;
  border: 1px solid #ddd;
}

.nf-error-msg, .ninja-forms-req-symbol {
  text-align: center;
}

/**** Partenariat ****/

.partenariat-container {
  gap: 30px;
  max-width: 1300px;
  justify-content: center;
}

.partenariat-container > a {
  width: 390px;
  height: 240px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  transition: all ease-in-out .3s;
}

.partenariat-container > a:hover {
  transform: perspective(600px) rotateY(8deg) translateY(-12px);
  box-shadow: 0px 15px 15px rgba(0,0,0,0.15);
}



/**** Petites annonces *****/

.pa-container {
  justify-content: center;
  flex-wrap: wrap;
  gap:30px;
}

.pa-container > a {
  max-width: 360px;
  width: 100%;
  height: 380px;
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
}

.ftr-pa {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  flex: 1;
  position: relative;
}

.cont-info-pa {
  height: auto;
  padding: 20px;
}

.titre-ftr-link {
  color: var(--cblack);
  font-family: var(--p1);
  font-size: 23px;
}

.extrait-pa {
  font-size: 16px;
  color: var(--cgris2);
}



/** Partenariats **/

.partenariat-template-default article {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 1250px;
  margin-left: auto;
  margin-right: auto;
}

.partenariat-template-default article > header {
  display: flex;
  flex-direction: column;
  flex: 1 35%;
  position: sticky;
  align-self: flex-start;
  top: 200px;
  margin-top: 90px;
}

a.retour-partenariat {
  text-align: center;
  padding: 20px;
  border: 1px solid var(--cgold);
  margin: 60px 40px 0 40px;
  color: #777;
}

.partenariat-template-default .news {

  width: 390px;
  height: 240px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  transition: all ease-in-out .3s;
  transform: perspective(600px) rotateY(8deg) translateY(-12px);
  box-shadow: 0px 15px 15px rgba(0,0,0,0.4);
}

.partenariat-template-default .content-main-article {
  flex: 1 65%;
  margin: 0;
}


/**** Recherche ****/

#recherche-live {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1160px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 30px;
}

#recherche-live input {
  width: 100%;
  max-width: 500px;
  padding-block: 0;
  border: 1px solid #ddd;
  padding-inline: 0;
  padding: 10px;
  color: var(--cgris1);
  font-family: var(--p2);
  background-image: url('images/searchicon.png');
  background-position: 13px 14px;
  background-repeat: no-repeat;
  background-size: 17px 16px;
  padding-left: 45px;
  transition: all .5s;
  font-size: 16px;
}

#recherche-live input:focus-visible {
  border: 1px solid var(--cgold);
  outline: inherit;
}

/**** Plane home ****/

.entry-content {
  position: relative;
}

.home .entry-content {
  overflow: hidden;
}

#plane-home {
  position: absolute;
  max-width: 850px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin-right: auto;
  margin-left: auto;
  transform: translateZ(0);
}

#path {
  width: 100%;
  height: 100%;
}

/** Profils **/

.profile-container {
  width: 100%;
  max-width: 1180px;
  padding: 0 20px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.updated {
  text-align: center;
}

.profile-container > div,
.profile-container .entry-content {
  width: 100%;
}


#adduser {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.ratings-row,
#simple-local-avatar-section h3,
.upload-avatar-row > th,
.upload-avatar-row .description {
  display: none;
}

.upload-avatar-row > td > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#adduser > p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
  flex-direction: column;
}

#adduser > p label,
#adduser > p input {
  width: 50%;
  min-width: 360px;
}

#adduser > p label {
  font-size: 15px;
  line-height: 20px;
  color: var(--cblack);
  font-family: var(--p1);
}

#adduser > p input {
  border: 0;
  background-color: #F1E6D0;
  color: var(--cgris1);
  transition: all ease .5s;
  height: 50px;
  font-size: 16px;
  margin: 0;
  padding: 12px;
  outline: none;
}

#adduser > p input:focus {
  background-color: #f9f7f4;
  border: 0;
  color: var(--cgold);
  outline: none;
}

#adduser h3 {
  margin-top: 50px;
  font-size: 28px;
}

#adduser .form-submit input {
  background-color: var(--cgold);
  margin-top: 20px;
  color: #FFFFFF;
  cursor: pointer;
}




/** RESPONSIVE **/

@media all and (max-width: 1250px) {

  /*globales*/

  h1.titre { font-size: 70px;}
  h1.titre~.separation-gold {
    height: 1px;
    width: 410px;
  }
  .no-content-atm h2 {
    font-size: 30px;
    line-height: 32px;
  }
  .no-content-atm {
    max-width: 500px;
    min-height: 250px;
  }

  .head-article h1, .sous-titre-article {
    font-size: 50px; 
  }
  .content-main-article {
    padding: 20px 30px;
  }
  .separation-gold { height: 1px; }

  .events-container .no-content-atm,
  .bonsplans-container .no-content-atm {
    position: relative;
    left: inherit;
    right: inherit;
  }


  /* menu top */
  #branding { height: 73px;}
  #menu {
    padding: 24px;
    height: 73px;
   }
  #menu a { font-size: 19px; }
  #menu .mid-nav #menu-item-55 > a { font-size: 25px; }
  .nav-caf > img { height: 50px; }
  .home-nav img { height: 55px; }



  /* homepage */
  .header-home h1 img {
    margin-left: 40%;
    max-height: 360px;
    width: auto;
  }
  .last-actu > div  { height: 400px; }
  .bg-dgd > img     { top: -45%; }
  .separation-cartes-home { margin: 30px  }
  .part-home h2 { font-size: 60px ;}
  .derniers-articles h3 { 
    font-size: 22px;
    letter-spacing: 1px;
   }
   .derniers-articles .ctarticle { font-size: 15px;}

   /* premiere */

   #nav-premiere li a { 
    height: 200px;
    font-size: 20px;
  }
   #nav-premiere li a img { max-height: 40px; }

  .container-article-adherents > a {
    height: 300px;
  }

   /* voyages */

   body .swiper-voyages {
    height: 450px;
   }

   body .swiper-slide {
    height: 350px;
    border-radius: 90px;
   }

   .swiper-slide > a {
    
   }
   body .swiper-slide::after {
    border-radius: 90px;
   }
   .page-template-voyages-template-acc .bonsplans-container {
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 40px;
   }

   .bonsplans-container > a {
    height: 250px;
   }

   /* partenariat */
   .partenariat-template-default article {
    flex-direction: column;
    align-items: center;
   }
   .partenariat-template-default article > header {
    position: relative;
    top: inherit;
    flex:inherit;
    width: 100%;
    justify-content: center;
    align-items: center;
    align-self: inherit;
    max-width: 1080px;
    margin-top: 10px;
    margin-bottom: 16px;
    padding: 20px 30px;
   }

   .partenariat-template-default .news {
    width: 312px;
    height: 192px;
    box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.4);
   }
   a.retour-partenariat {
    width: 220px;
    margin: 0;
    padding: 12px;
    position: absolute;
    top: 0;
    left: 30px;
   }

   .partenariat-template-default .content-main-article {
    flex:inherit;
    width: 100%;
   }

   /* Bons plans */

  .bonsplans-container {
    padding: 0 20px;
  }
  .bpcf > a { 
    min-width: inherit;
    height: 300px;
  }

  .bpcf-s > a {
    height: 220px;
  }

  /* Events */

  .events-container {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* Events article */
  .event-infos > div {
    padding: 25px;
  }
  .label-info-event {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .event-infos > div.event-date > span {
    font-size: 16px;
  }


}


@media all and (max-width: 940px) {

  /* globales */
  p {
   font-size: 16px;
   line-height: 26px; 
  }
  h1.titre { font-size: 50px;}
  h1.titre~.separation-gold { width: 350px;}

  .no-content-atm h2 {
    font-size: 26px;
  }

  /* Menu */

  .menu-burger {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 201;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
  }

  #menu {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -100%;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px 20px 60px;
    gap: 30px;
    transition: all ease .5s;
  }

  #menu.active {
    left: 0;
  }

  #menu .home-nav,
  #menu .user-nav {
    position: relative;
  }

  .menu-burger > a {
    padding: 10px 20px;
  }

  #menu .mid-nav {
    order: 3;
  }

  #menu .mid-nav > ul {
    flex-direction: column;
    align-items: flex-start;
  }

  #menu-menu-principal > li:first-child::after, #menu-menu-principal > li:last-child::after {
    display: none;
  }

  #menu .home-nav {
    left: 0;
    align-self: center;
  }

  .home-nav img {
    height: 150px;
  }

  #menu a {
    font-size: 26px;
  }

  .menu-premiere {
    display: none;
  }

  #menu .user-nav {
    right: inherit;
    order: 3;
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    width: 100%;
    align-items: baseline;
  }

  #menu .user-nav a {
    font-size: 14px;
  }

  .user-nav .login-home {
    margin-left: 0;
    width: auto;
    height: auto;
    gap: 20px;
  }

  .user-nav .login-home > ul {
    overflow: inherit;
    position: relative;
    display: flex;
    width: auto;
    height: auto;
    opacity: 1;
    flex-direction: row;
    right: inherit;
    top: inherit;
    flex-wrap: wrap;
  }

  .user-nav .login-home > img {
    height: 40px;
    width: 40px;
  }

  #menu .mid-nav #menu-item-55 > a {
    font-size: 36px;
  }

  #menu .nav-caf {
    position: relative;
    top: inherit;
    left: inherit;
  }

  #menu-menu-principal > li:first-child {
    order: 2;
  }



  /* footer */

  footer { 
    flex-direction: column;
    gap: 20px;
  }
  #copyright {
    position: relative;
    right: inherit;
    text-align: center;
  }
  


  /* home */
  .last-actu h3 { font-size: 30px;}
  .separation-cartes-home > img { height: 100px;}
  .derniers-articles a { min-height: 280px;}
  #plane-home {max-width: 675px;}

  .last-actu > div::before,
  .last-actu > div::after {
    height: 101%;
    background-size: 65% 100%;
    left: -15%;
  }
  .last-actu > div::after {
    left: 64%;
  }
  .last-actu > div { height: 300px;}
  .last-actu h3 {
    font-size: 24px;
    letter-spacing: 1px;
  }
  .last-actu a {
    padding: 12px;
    font-size: 16px;
  }
  .separation-gold { height: 1px; }
  .derniers-articles .ctarticle { padding: 11px; }
  
  /* premiere */
  .aa-title h2 {font-size: 30px;}

  .container-article-adherents h2 {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .aa-titre-offset {
    font-size: 19px;
    letter-spacing: 1px;
  }

  /* voyages */
  .page-template-voyages-template-acc .bonsplans-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-template-voyages-template-acc .bonsplans-container a {
    height: 220px;
  }
  body .swiper-voyages {
    padding-top: 20px;
    height: 400px;
  }
  body .swiper-slide {
    height: 330px;
    border-radius: 60px;
  }
  body .swiper-slide::after {
    border-radius: 60px;
  }
  .voyages-title-slide { font-size: 28px; }
  .titre-bonplans-link { font-size: 24px; }

  /* partenariat */
  a.retour-partenariat {
    font-size: 0;
    width: 40px;
    height: 40px;
    background-color: #fff;
    padding: 0;
    padding-top: 7px;
  }

  a.retour-partenariat::after {
    content: "<";
    font-size: 22px;
    margin-left: -3px;
  }

  /* Bons plans */

  .bpcf > a {
    height: 180px;
    flex: 1 100%;
  }
  .bpcf-s > a { height: 180px; }
  .bpcf-s {
    grid-template-columns: repeat(2, 1fr);
  }
  .bonsplans-container .titre-bonplans-link {
    backdrop-filter: blur(7px) brightness(0.8);
    padding: 5px;
  }

  /* Bons plans articles */
  .back-navigation {
    padding: 10px 20px;
    font-size: 18px;
  }
  .back-navigation::before {
    border-width: 19px;
    right: -19px;
  }
  .bon-plan-template-default .timer-article {
    padding: 20px;
  }

  /* Events */

  .titre-cadre {
    font-size: 24px;
    letter-spacing: 1px;
  }
  .date-cadre-timeline div {
    font-size: 16px;
    padding: 13px;
  }

  /* Events articles */

  .event-container {
    padding: 0 20px;
    gap: 20px;
  }

}


@media all and (max-width: 820px) {

  /* globales */

  .head-article h1,
  .sous-titre-article {
    font-size: 36px;
    margin-top: 10px;
  }

  /* footer */

  footer { margin: 70px 0 20px 0; }

  /* home */
  .derniers-articles {
    flex-direction: column;
  }
  .derniers-articles a {
    min-height: 220px;
    width: 100%;
  }

  /* première */
  .container-article-adherents {
    flex-direction: column;
  }
  .container-article-adherents > a {
    width: 100%;
    height: 180px;
    align-items: flex-start;
  }

  .container-article-adherents .separation-gold {
    margin-left: inherit;
  }

  .container-article-adherents .ctarticle {
    font-size: 14px;
    padding: 10px 15px;
  }

  .dehanch { width: 15%;}
  .laadh { width: 85%;}

  /* voyages */

  .page-template-voyages-template-acc .bonsplans-container {
    padding-left: 0;
    padding-right: 0;
    grid-template-columns: repeat(1, 1fr);
  }

  .page-template-voyages-template-acc .bonsplans-container a {
    height: 140px;
    padding: 20px;
  }

  /* Events Articles */
  .content-event { padding: 0;}
  .news-event {
    height: 250px;
  }
  .event-container {
    flex-direction: column;
  }
  .event-infos {
    width: 100%;
    margin-top: -60px;
    gap: 10px;
  }
  .event-infos > div {
    padding: 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .label-info-event {
    margin-bottom: 0;
    font-size: 20px;
  }

  .content-event {
    margin-top: 0;
  }

  /* 404 */

  .message-p404 img {
    width: 60%;
  }
  .nav-404 { flex-direction: column;}

}

@media all and (max-width: 690px) {

  /* globales */
  h1.titre { font-size: 40px;}
  h1.titre~.separation-gold { width: 50%;}
  .page-template #content {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* footer */
  #menu-footer-menu { flex-wrap: wrap; }

  /* home */
  .header-home {
    align-items: flex-end;
    padding-right: 20vw;
  }

  .home.page-template #content {
    padding-left: 0;
    padding-right: 0;
  }

  .home.page-template #content .elementor-8 {
    padding-right: 20px;
    padding-left: 20px;
  }

  .parahomeheader {
    height: 68%;
  }

  .last-actu > div {
    height: 250px;
  }

  .header-home h1 img {
    margin: 0;
    padding-right: 20%;
    max-height: 260px;
  }

  .bg-dgd > img {
    top: -20%;
  }
  .menu-homepage { flex-direction: column;}

  .menu-homepage .premiere-homepage-menu {
    order: 3;
  }

  .menu-homepage .premiere-homepage-menu::after,
  .menu-homepage .premiere-homepage-menu::before {
    display: none;
  }

  .header-home .separation-gold {
    margin-left: inherit;
    margin-right: inherit;
    padding-right: 20vw;
  }

  .arrow-hh { margin-right: 68px; }


  /* premiere */

  #nav-premiere ul { flex-direction: column;}

  #nav-premiere li { 
    display: flex;
    width: 100%;
  }
  #nav-premiere li a {
    height: 90px;
    flex-direction: row;
    flex: 1;
    justify-content: flex-start;
    padding-left: 40px;
  }
  #nav-premiere li a img {
    max-height: inherit;
    max-width: 32px;
  }
  body .swiper-slide { border-radius: 0;}
  body .swiper-slide::after { border-radius: 0;}

  .dehanch { display: none; }
  .laadh {
    width: 100%;
  }

  /* Bons plans */

  .bonsplans-container { padding: 0; }
  .bpcf-s > a { padding: 10px;}
  .bonsplans-container .titre-bonplans-link {
    font-size: 20px;
    letter-spacing: 1px;
    margin-bottom: 5px;
  }

  /* Events */

  .events-container {
    padding-left: 0;
    padding-right: 0;
  }
  .titre-cadre {
    font-size: 20px;
    max-width: 75%;
  }
  .event-cadre > div {
    padding: 15px 30px 15px 25px;
  }

  .animated-arrow > .main-a {
    font-size: 16px;
  }
  .animated-arrow > .main-a > .text { margin-right: 30px;}
  .the-arrow.-right { top: 2px;}


}



/* Height fix */
@media all and (max-height: 840px) {
  .hashtag-voyage-article {
    left: -105px;
    top: 38vh;
    letter-spacing: 8px;
    font-size: 4rem;
  }
}
/* Fixs */
@media all and (max-width: 820px) {
  #filigrane { font-size: 40px; }
  .hashtag-voyage-article { display: none; }
  .content-article p { font-size: 16px; }
  .content-article-voyage { padding: 40px 25px; }
  .voyage-template-default .elementor-divider-separator h2 {
    font-size: 45px !important;
    margin: 0 10px;
  }
  .voyage-template-default .elementor-divider-separator h3 { font-size: 34px !important; }
  .voyage-template-default .elementor-heading-title h4,
  .voyage-template-default .elementor-heading-title h5 { font-size: 26px !important; }

  footer {
    flex-direction: column;
    align-items: center;
  }
  #menu-footer-menu {
    flex-wrap: wrap;
    gap: 20px;
  }
  #copyright {
    position: relative;
    font-size: 12px;
    margin-top: 20px;
    margin-bottom: 30px;
  }
}

@media all and (max-height: 780px) {
  /* globales */
  p {
   font-size: 16px;
   line-height: 26px; 
  }
}

/* Progress Bar */

.progressBar {
        position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    background: #eb911c;
    width: 0%;
    z-index: 1000;
    transition: width 0.2s ease-out;
}

#wpadminbar~.progressBar {
  top: 32px;
}