/*************************************************************************/
/**                    responsive : MOBILE FIRST                        **/
/*************************************************************************/

/* X-Small devices (portrait phones, less than 576px / 36em)
 No media query for `xs` since this is the default in Bootstrap */
.btn {
  text-transform: uppercase;
}
 .blanc #logo .cls-1, .blanc #logo .cls-2 {
	fill:var(--bs-white);
}
#logo {
  position:relative;
  top: 0;
  left: 0;
  transition: all ease 500ms;
}
.blanc #logo {
  top: 3.5rem;
  left: 1rem;
}
#bt_access[aria-expanded="false"] {
	top: -2.7rem;
}

 section {
    padding: 3rem 0;
}

section#banner {
  padding:0;
  min-height: 25rem;
  background-color: var(--bs-primary);
}
section#banner > img {
    object-fit: cover;
    height: 280px;
    width: 100%;
  }

  section#banner {
    position:relative;
  }
  section#banner .lead {
    font-size: 2.3rem;
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
    0px 8px 13px rgba(0,0,0,0.2),
    0px 18px 23px rgba(0,0,0,0.1);
    background: none;
  }

  section#banner .container {
    position: absolute;
    z-index: 2;
    color: white;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  section#banner .container .lucide-chevron-down {
    width: 7rem;
    position: absolute;
    bottom:2.5rem;
    color:var(--bs-white);
    left: 50%;
    transform: translateX(-50%);
  }
 .rapides {
  position: relative;
  margin-top: -80px;
  padding: 0;
  background-color: var(--bs-white);
  border-radius: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  max-width: 95%;
 }
    #actualite h2 {
    margin:7rem 0 4rem;
  }

.list-view.simple .article .date-event {
	font-size: 1.9rem;
  font-weight: 600;
	min-width: 0;
	width: 9rem;
	min-height: 12rem;
	margin: 0 auto;
  flex:none;
  position:static;
}
.list-view.simple .article {
	padding: 1.3rem;
	margin: 0 0 2.5rem 2rem;
  background-color:var(--bs-info);
}
.bg-primary .list-view.simple .article {
  background-color: var(--bs-white);
}
.bg-primary .menu-pictos-svg a {
  color: inherit;
}
.menu-pictos-svg a {
  margin: 2rem;
}
/* Small devices (landscape phones, 576px / 36em and up) sm */
@media (min-width: 36em) {
  section#banner > img {
    height: calc(100vh - 5rem);
  }
}

/* Medium devices (tablets, 768px / 48em and up) md */
@media (min-width: 48em) {
  #enbref .main .frame {
    margin-right: 1rem;
  }
  #enbref .side {
    margin: -5rem 0 0;
  }
  #enbref .side h2 {
    margin: -4rem auto .5rem auto;
  }
}

/* Large devices (desktops, 992px / 62em and up) lg */
@media (min-width: 62em) {
  
  section#banner .lead {
    font-size: 2.8rem;
  }
  section#banner .lead span[lang="oc"] {
    padding: .2rem 3rem .6rem;
  }
.rapides {

  margin-top: -120px;

  max-width: 1200px;
 }
  #enbref .main .frame {
    margin-right: 2rem;
  }
  #enbref .side {
    margin-bottom: -3rem;
  }
}
/* X-Large devices (large desktops, 1200px / 75em and up) xl */
@media (min-width: 75em) {

  .site-header ul, #logo {
    opacity: 1;
    transition: all ease-in 500ms;
  }
  .site-header.blanc ul {
    opacity: 0;
  }
#actualite .col-lg-4 h2 {
  font-size: 3.4rem;
  letter-spacing: -0.05rem;
}
}

/* XX-Large devices (larger desktops, 1400px / 87.5em and up) xxl */
@media (min-width: 87.5em) {
  section#banner .lead {
    font-size: 4rem;
  }
  
}