:root {
    --bs-body-font-family:'Noto Sans', sans-serif;
    --bs-body-color:#333333;
    --bs-primary:#1F69FF;
    --bs-primary-rgb:31, 105, 255;
    --bs-secondary:#26D07C;
    --bs-secondary-rgb:38, 208, 124;

    --bg-grey:#f2f2f2;
    --footer-color:#333;
  }

  .btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #26D07C;
    --bs-btn-border-color: #26D07C;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1ca15f;
    --bs-btn-hover-border-color: #1ca15f;
    --bs-btn-focus-shadow-rgb: 130,138,145;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1ca15f;
    --bs-btn-active-border-color: #1ca15f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #a9cebc;
    --bs-btn-disabled-border-color: #a9cebc;
    color:#333; 
}

.table-warning {
  --bs-table-color: #333;
  --bs-table-bg: #ffd0005b;
}
.table-warning svg path{fill:#F14336;}

.table-success {
  --bs-table-color: #333;
  --bs-table-bg: #26D07C5b;
}
.table-success svg path{fill:#0E8668;}


/*html,body{overflow-x: hidden;}*/

.btn{    line-height: 1.2;}
.btn-lg{padding: 10px 25px; font-weight:bold; font-size: 16px;}

.btn-yellow{ background-color: #FFD100; color:#333}


#wrapper-site{}
#wrapper-content{ min-height: calc(100vh - 128px);}

#footer, #footer > nav{background-color: var(--footer-color)!important}

.primarytosecondary{ background:linear-gradient(160deg,rgb(var(--bs-primary-rgb)) 0%,rgb(var(--bs-secondary-rgb)) 70%)}
.primarytosecondary{ 
  background-image:url(../img/icons-bg.png),linear-gradient(160deg,rgb(var(--bs-primary-rgb)) 25%,rgb(var(--bs-secondary-rgb)) 70%);
  background-blend-mode:overlay;
  background-attachment: fixed, scroll;
  background-position: top left, center;
  animation: mymove 300s infinite;
}
h1.accueil{color:#fff; font-size: 32px; font-weight: 500; margin-left:8%;position: relative; }
h1.accueil:before{background: url(../img/points.png) top left no-repeat; content: ""; width: 139px; height: 86px; display: block; position:absolute; left: -40px; top: -25px;}
h1 span.decal{position: relative; left:10%;}
h1 span.underlined{border-bottom: solid 2px var(--bs-secondary);}

.mcard {
  border-radius: 30px;
  background-color: var(--bg-grey);
  padding: 2rem;
}

.swiper {
  width: 320px;
  height: 150px;
  /*right: 70px;
  top: 25px;*/
  cursor: pointer;
  max-width: 100%;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  /*font-size: 22px;
  font-weight: bold;*/
  color: #fff;
  position: relative;
  cursor: pointer;
}

.slide-content {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.slide-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.slide-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25%;
  padding: 5px 10px;
  background-color: #fff;
  font-size: 12px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-circle {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);;
  display: flex;
  align-items: center;
  justify-content: center;
}

.date-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date-separator {
  width: 50%;
  height: 1px;
  background-color: #000;
  margin: 1px 0;
}

.start-date, .end-date {
  font-size: 10px;
  color: #000;
}

.arrow-button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-button i {
  color: #000;
}

.mySwiper [class^="swiper-button-"]::after {
  content: "";
  color: black;
}

.mySwiper .swiper-button-next {
  top: inherit;
  left: calc(50% - 22px);
  color: black;
  bottom: -50px;
}

.mySwiper .swiper-button-prev {
  top: -22px;
  left: calc(50% - 22px);
  color: black;
  align-items: center;
  bottom: inherit;
}

.swiper-container .swiper-button-prev,
.swiper-container .swiper-button-next {
  display: none;
}
.swiperCJ{width:100%; height: 180px;}
.swiperCJ .swiper-button-next {bottom:-70px;}
.swiperP{width:100%; height: 150px;}
.swiperP .swiper-button-next {}



.swiperP .swiper-slide {
height: auto !important;
}
.swiperP .swiper-content {
height: 100% !important
}

.swipecard a {text-decoration: none; color:#333; }
  .swipecard a , .swipecard .small p {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
  }


.profil-card{ position: relative;  border-radius: 15px; background:linear-gradient(140deg,rgb(var(--bs-primary-rgb)) 60%,rgb(var(--bs-secondary-rgb)) 100%); transition: "background" 2.5s; background-position:0px;  }
.profil-card h3{font-size: 18px; font-weight: 400;}
.profil-card a {text-decoration: none; color:#fff;}
.profil-card .img-wrapper {width: 80px; height: 80px; padding:5px; margin: 0 10px;}
.profil-card img {text-decoration: none; color:#fff; border-radius: 100px; background-color: #fff; width:100%; height:100%; object-fit: contain; padding: 10px; } 
.profil-card:not(.disabled):hover{box-shadow: 0px 0px 20px rgba(0,0,0,0.3); z-index: 5; background:linear-gradient(140deg,rgb(var(--bs-primary-rgb)) 0%,rgb(var(--bs-secondary-rgb)) 50%)}
.profil-card.active{background:var(--bs-secondary); }
.profil-card.active a{color:#333; }
.profil-card.disabled{opacity:0.5; }
.profil-card.disabled a:hover{cursor:initial!important;}

@keyframes mymove {
50% {background-position: bottom right, center;}
}

#footer nav .nav-link{ padding: 1em;}

#mainNav{font-size: 19px; text-align: center;}
#mainNav .navbar-brand {font-size: 24px;top: -2px;position: relative;}
@media screen and (min-width: 992px) {
  .navbar {
    padding: 0;
  }
  #mainNav.navbar .navbar-nav .nav-link {
    padding: 1em; 
  }
  
  
}
@media screen and (min-width: 992px) and (max-width: 1200px) {
  #mainNav{font-size: inherit; }
  #mainNav.navbar .navbar-nav .nav-item {
    margin: 0 0.2em;
  }
}

#mainNav .navbar-nav .nav-item {
  position: relative;
}
#mainNav .navbar-nav .nav-item:not(.disabled)::after {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: 0 auto;
  content: "";
  background-color: black;
  width: 0%;
  height: 2px;
  transition: all 0.5s;
}
#mainNav .navbar-nav .nav-item.nav-item-jeune::after { background-color: var(--bs-primary);}
#mainNav .navbar-nav .nav-item.nav-item-asso::after { background-color: var(--bs-secondary);}
#mainNav .navbar-nav .nav-item:hover::after {
  width: 100%;
}




/*------------------------- SPECIFIQUE JEUNE ----------------------*/

.header-jeunes > div{ 
  background-image:url(../img/icons-bg.png),linear-gradient(170deg,rgb(var(--bs-primary-rgb)) -20%,rgb(var(--bs-secondary-rgb)) 90%);
  background-blend-mode:overlay;
  background-attachment: fixed, scroll;
  background-position: top left, center;
  background-size: 70%, 100%;

  min-height: 200px;
}
.header-jeunes h1{ color:#fff; padding-bottom: 1.5em;}
/*------------------------- SPECIFIQUE ASSO ----------------------*/

.header-assos > div{ 
  background-image:url(../img/icons-bg.png),linear-gradient(170deg,rgb(var(--bs-secondary-rgb)) 35%,rgb(var(--bs-primary-rgb)) 100%);
  background-blend-mode:overlay;
  background-attachment: fixed, scroll;
  background-position: top left, center;
  background-size: 70%, 100%;

  min-height: 200px;
}
.header-assos h1{ color:#333; padding-bottom: 1.5em;}

#head {position: relative;}
#breadcrumb{ background-color: #E3E3E3; padding:10px 30px; border-radius: 30px 30px 0 0 ; width: fit-content; position: relative;top: -44px; margin-left: 30px; font-size: 16px;}
#breadcrumb * { color: #333; text-decoration: none;}
#breadcrumb .active { font-weight: 600;}
#breadcrumb ol{margin: 0;}

#wrapper-content.grey-wrapper{
margin-top: -30px;
position: relative;
border-radius: 30px;
background-color: #F2F2F2;
}



.wcard{ background-color: #fff; box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.1); padding:20px;  border-radius: 15px; overflow: hidden;;}


.text-bg-orange{background-color: #E66941; color: #333;}
.text-bg-purple{background-color: #7936B0; color: #fff;}
.text-bg-green{background-color: #26D07C; color: #333;}
.text-bg-yellow{background-color:#FFD100; color: #333;}
.text-bg-red{background-color: #B30006; color: #fff;}
.text-bg-green2{background-color: #0E8668; color: #fff;}


.bg-yellow{background-color:#FFD100; color: #333}

.round-label{ padding: 5px;}
.round-label svg{ margin: 0px!important; padding: 0px!important;}



.rounded-7{border-radius: 7px;}



.btn-entrance{ border-radius: 15px; overflow: hidden; height: 85px; margin-bottom: 1em; align-items: stretch; font-weight: bold;}
.btn-entrance> span{ display:flex; align-items: center; height: 100%;;}


.with-tilt:hover{box-shadow: 0px 0px 20px rgba(0,0,0,0.3); z-index: 1000;}
.btn-entrance.with-tilt svg{transition:all 0.5s;}
.btn-entrance:hover svg{ transform: rotate(320deg) scale(1.3); }


/* The actual timeline (the vertical ruler) */
.main-timeline-4 {
  position: relative;
}

.main-timeline-4 a{
  color:#333; text-decoration: none;;
}

/* The actual timeline (the vertical ruler) */
.main-timeline-4::after {
  content: "";
  position: absolute;
  width: 3px;
  background-color:var(--bs-secondary);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline-4 {
  position: relative;
  background-color: inherit;
  width: 50%;
  max-height: 150px;
}

/* The circles on the timeline 
.timeline-4::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -11px;
  background-color: #bbb;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}*/

.left-4 .datebox{flex-direction: row; text-align: right;}
.left-4 .datebox > div:nth-child(2){ margin-left: 1em;}
.right-4 .datebox{flex-direction: row-reverse; text-align: left;}
.right-4 .datebox > div:nth-child(2){ margin-right: 1em;}

/* Place the container to the left */
.left-4 {
  padding: 0px 40px 20px 0px;
  left: 0;
}

/* Place the container to the right */
.right-4 {
  padding: 0px 0px 20px 40px;
  left: 50%;
}


.left-4::before {
  content: " ";
  position: absolute;
  top: 20px;
  z-index: 1;
  right: 0px;
  width:90px;
  border: solid 1px var(--bs-secondary);
}

.right-4::before {
  content: " ";
  position: absolute;
  top: 20px;
  z-index: 1;
  left: 0px;
  width:90px;
  border: solid 1px var(--bs-secondary);
}

/* Fix the circle for containers on the right side */
.right-4::after {
  left: -14px;
}

.timeline-4:last-child {max-height:none;}

@media screen and (max-width: 992px) {

  .timeline-4::before { width:40px; }

}
@media screen and (max-width: 1200px) {
  
  .timeline-4 {
    max-height:none;
  }

}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline-4::after {
    left: 31px;
  }

  /* Full-width containers */
  .timeline-4 {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
    max-height:none;
  }

  /* Make sure that all arrows are pointing leftwards */
  .timeline-4::before {
    content: " ";
  position: absolute;
  top: 20px;
  z-index: 1;
left: 30px;
  width:40px;
  border: solid 1px var(--bs-secondary);
  }

  /* Make sure all circles are at the same spot */
  .left-4::after,
  .right-4::after {
    left: 18px;
  }

  .left-4::before {
    right: auto;
  }

  /* Make all right containers behave like the left ones */
  .right-4 {
    left: 0%;
  }

  .left-4 .datebox{flex-direction: row-reverse; text-align: left;}
  .left-4 .datebox > div:nth-child(2){ margin-right: 1em; margin-left:0;}

}



/*-------------------------------------------- 
            ESPACE JEUNE 
----------------------------------------------*/

.carte-jeune{background-color:var(--bs-primary); color:#fff; display: flex; border-radius:15px; padding: 20px; justify-content: space-between; font-weight: 500; font-size: 16px; line-height: 20px;;}
.carte-jeune img.avatar{max-width: 75px; height: auto; margin-bottom: 5px;}
.carte-jeune #qrcode{ width: 130px; display: flex; align-items: center;}

.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.title{font-weight: bold;}
.title a{ color:#333; text-decoration: none;}

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.pie {
  --p:20;
  --b:22px;
  --c:darkred;
  --w:150px;
  
  width:var(--w);
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  margin:5px;
  place-content:center;
  font-size:36px;
  font-weight:700;
  line-height: 1.1;
}
.pie small{font-size:20px; color:#858585;}
.pie:before,
.pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset:calc(50% - var(--b)/2);
  background:var(--c);
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}
@keyframes p {
  from{--p:0}
}

body {
  background:#ddd;
}

.pie:after {
  inset: calc(50% - var(--b)/2);
  background: #ffffff;
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2)) scale(2.5);
  box-shadow: 0 0 1px rgba(0,0,0,0.5);
}
.piebg:after {
  display: none;
}
.pie-wrapper { width:150px; height:150px; position: relative;}
.pie-wrapper > div { position: absolute; left: 0; top: 0;}


.depenses-bloc img{border-radius: 10px;}
#col-gauche .card > div{padding: 10px 0 10px 10px;}
#col-gauche .card img{border-radius: 10px; width: 100px;}

.swiper-slide {
  height: auto;
 }



/*-------------------------------------------- 
            CARTE LEAFLET 
----------------------------------------------*/
 

.fullHeighMap{}


 .leaflet-container {
  font: inherit!important;
}

.my-div-icon > div {
  position: absolute;
  width: 40px;
  height: auto;
  text-align: center;
}
.my-div-icon > div > i {}
.my-div-icon > div > .subicon{
      position: absolute;
  top: 5px;
  width: 100%;
  text-align: center;
}
.my-div-icon > div > .subicon i{
  font-size:1.2em; color:#fff; text-shadow: 0px 0px 3px rgba(0,0,0,0.5)
}

.marker-cluster span {
    color: #000!important;
}
.marker-cluster div {
    background-color: #fff!important;
}
.marker-cluster {
  background-color: rgba(66, 141, 204, 1)!important;
}
.leaflet-container .leaflet-control-attribution {
  font-size: 10px;
}

#map .badge svg {position: relative!important}