@font-face {
  font-family: 'Poppins';
  src: local('Poppins'), url('fonts/Poppins.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: local('Poppins Light'), local('Poppins-Light'), url('fonts/Poppins-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url('fonts/Poppins-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: local('Poppins Bold'), local('Poppins-Bold'), url('fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'), url('fonts/Poppins-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}
/*

Bleu : #14697E
Orange : #FBBC43

*/
* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {
  font-family: 'Poppins', sans-serif;
  font-size: medium;
  color: #000;
  background: #FFF;
}
header {
  min-height: 40vh;
  box-sizing: border-box;
  padding: 0 0 5vw;
  background: url(../images/bg-champs-ble.webp) no-repeat center center;
  background-size: cover;
}
#menu {
  position: fixed;
  top: 0;
  z-index:2;
  width:100%;
  background: #FFF;
  transition: .2s ease;
}
#menu>div {
  z-index: 5;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 2.5vw;
}
#menu h2 {
  margin: 0;
  width: 10%;
  height: 150px;
  max-width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#menu h2 a,
#menu h2 img {
  display: block;
  width: 100%;
}
#menu_nav {
  width: 80%;
  padding: 0;
}
#nav_haut {
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  list-style: none;
}
#nav_haut>li {
  flex: 1 1 auto;
  position: relative;
  font-weight: 600;
  display: flex;
}
#nav_haut>li>a,
#nav_haut>li>span {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 50px 10px 10px;
  color: #007BB8;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
#nav_haut>li>a img,
#nav_haut>li>span img {
  height: 50px;
}
#nav_haut>li>a:hover,
#nav_haut>li>span:hover {
  background-color: #B1C800;
}
#nav_haut>li>a.active,
#nav_haut>li>span.active {
  background-color: #B1C800;
  color: #FFF;
}
#nav_haut>li>ul {
  display: none;
}
#nav_haut>li:hover>ul {
  position: absolute;
  top: 150px;
  left: -15vw;
  display: flex;
  flex-wrap: wrap;
  width: 40vw;
  padding-top: 1.75vw;
  list-style: none;
  background: rgba(0, 123, 184, 0.9);
}
#nav_haut>li:nth-of-type(5):hover>ul {
  left: -25vw;
}
#nav_haut>li>ul>li>a {
  padding: 0 1.75vw 1.75vw;
  display: flex;
  align-items: center;
  color: #FFF;
  font-size: 0.8em;
  font-weight: 500;
}
#nav_haut>li>ul>li>a:hover,
#nav_haut>li>ul>li>a.active {
  color: #B1C800;
}
#nav_droite {
  position: absolute;
  top: 150px;
  right: 0;
  background: #FDA332;
  width: 100px;
  min-height: calc(100vh + -150px);
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  list-style: none;
  color: #FFF;
  transition: .2s ease;
}
#nav_droite li {
  text-align: center;
  padding: 10px;
  font-size: 12px;
}
#nav_droite li a{
  white-space: pre-line;
}
#nav_droite li:last-of-type {
  border-top: 1px solid #FFF;
}
#nav_droite li a.active {
  color: #007BB8;
}

#menu.scrolled  {
  margin-top: -150px;
}
#menu.scrolled #nav_droite{
  margin-top: 150px;
  margin-right: -150px;
}
header h1 {
  align-self: flex-end;
  margin: 0 auto;
  padding-top: 200px;
  width: 80%;
  max-width: 1000px;
  color: #FFF;
  font-weight: 600;
  font-size: 3em;
}
#fil_ariane {
  width: 90vw;
  padding-top: 5px;
  border-bottom: 1px solid #007BB8;
  color: #007BB8;
  font-size: 0.8em;
  text-align: right;
}
#fil_ariane>span {
  display: inline-block;
  margin-bottom: -50px;
  padding: 0 2.5vw 3px;
  background: #FFF;
}
#fil_ariane strong {
  color: #B1C800;
}
footer {
  position: relative;
  color: #FFF;
  background: transparent linear-gradient(180deg, #007BB8 0%, #003E5C 100%) 0% 0% no-repeat padding-box;
  text-align: center;
}
footer>div {
  padding: 5vw 0 2.5vw;
}
footer h2 {
  width: 150px;
  margin: 0 auto 2.5vw;
}
footer h2 img {
  width: 100%;
}
footer nav ul {
  margin-bottom: 2.5vw;
  display: flex;
  list-style: none;
  justify-content: space-around;
  text-transform: uppercase;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer .col2 {
  font-size: 0.8em;
}
footer h3 {
  font-size: 1.3em;
  font-weight: 600;
  white-space: pre-line;
  margin-bottom: 0.5em;
}
footer .bfleche {
  position: absolute;
  bottom: calc(2.5vw + 50px);
  right: 2.5vw;
}
#footer_legals {
  padding: 0;
  width: 100%;
  max-width: none;
  border-top: 1px solid #FFF;
}
#footer_legals p {
  margin: 0;
  padding: 10px;
  font-size: 0.8em;
  font-weight: 300;
  text-align: center;
}
/* Accueil */
.accueil header {
  height: 100vh;
}
.accueil header h1 {
  padding-top: calc(50vh + 150px);
  font-weight: 300;
  white-space: pre-line;
}
.accueil header h1 span {
  font-size: 0.8em;
}
.accueil header h1 strong {
  font-weight: 600;
}
.accueil header .bfleche {
  position: absolute;
  bottom: 25px;
  left: 50%;
  width: 15px;
  height: 20px;
  padding: 7.5px 2.5px;
  background: none;
  border-radius: 10px;
  border: 1px solid #FFF;
}
.accueil header .bfleche img {
  width: 15px;
}
.accueil .presentation {
  background: url(../images/bg-vagues.webp) no-repeat center center;
}
#accueil_actualites {
  padding: 5vw calc(2.5vw + 100px) 5vw 2.5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #FDA332 0%, #FDA33200 100%);
}
#accueil_actualites>div {
  width: 22.5%;
}
#accueil_actualites>nav {
  width: 70%;
}
#actus li {
  background-size: cover;
}
#actus a {
  height: 400px;
  box-sizing: border-box;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: transparent linear-gradient(180deg, rgba(0, 0, 0, 0) 75%, #007BB8 100%) 0% 0% no-repeat padding-box;
  color: #FFF;
}
#actus a:hover {
  background: none;
  text-shadow: 1px 1px 2px #007BB8;
}
#accueil_agenda h3 {
  margin: 0;
  font-size: 10em;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #B1C800;
  opacity: 0.15;
}
#accueil_agenda h2 {
  width: 50%;
  margin: -3.1em 0 5vw 45%;
}
#agenda {
  margin-bottom: 2.5vw;
}
#agenda li:nth-of-type(even) {
  margin-top: 5vw;
}
#agenda a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}
#agenda h5 {
  width: 100%;
  height: 300px;
  background-size: cover;
}
#agenda h5>span {
  margin-left: 10px;
  display: inline-block;
  padding: 10px;
  background: #FDA332;
  border-radius: 0px 0px 10px 10px;
  color: #FFF;
  font-size: 2em;
  font-weight: 600;
  text-align: center;
}
#agenda h5 strong {
  display: block;
  font-size: 0.5em;
  font-weight: normal;
  text-transform: uppercase;
}
#agenda h5>span>span {
  display: inline-block;
}
#agenda h5>span>small {
  display: inline-block;
  padding-bottom: 0.5em;
  font-size: 0.8em;
  font-weight: normal;
}
#agenda a>div {
  width: calc(100% + -40px);
}
#agenda h4 {
  color: #FDA332;
  font-size: 1em;
  font-weight: 600;
  text-transform: uppercase;
}
#agenda>li>a>div>small {
  color: #007BB8;
  padding-left: 10px;
  background: url(../images/ico-carte.svg) no-repeat center left;
  background-size: 8px;
}
#accueil_territoire {
  padding: 500px 0 0;
  background: linear-gradient(180deg, #FFF 0%, rgba(128, 128, 128, 0) 100%), url(../images/bg-champs-bottes.webp) no-repeat center center;
  background-size: cover;
}
#accueil_territoire>div {
  width: 45%;
  padding: 5vw 5vw 5vw 10vw;
  background: rgba(255, 255, 255, 0.5);
}
#accueil_communes {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #FFF 35%, rgba(255, 255, 255, 0.5) 65%), url(../images/bg-chemin-terre.webp) no-repeat center right;
  background-size: 100%, cover;
}
#accueil_communes_map {
  position: relative;
  width: calc(45vw - 50px);;
  height: calc(45vw - 50px);
}
#accueil_communes_map img {
  width: 100%;
  display: block;
}
#accueil_communes_map_caption {
  display: none;
  position: absolute;
  width: 50%;
  min-width: 215px;
  box-sizing: border-box;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px 10px 0 0;
  color: #FFF;
  font-size: 0.8em;
}
#accueil_communes_map_caption h5 {
  margin: 0;
  color: #B1C800;
  font-size: 1.2em;
  font-weight: 300;
  text-transform: uppercase;
}
#accueil_communes_map_caption p {
  margin: 5px 0 0;
  padding-left: 20px;
  background: url(../images/ico-telephone.svg) left center no-repeat;
  background-size: 15px;
}
#accueil_communes_map_caption p:last-of-type {
  background-image: url(../images/ico-email.svg);
}
#accueil_communes_map a {
  position: absolute;
  display: block;
  width: 10%;
  height: 10%;
  background: none;
  border-radius: 50%;
}
#accueil_communes_map a:hover,
#accueil_communes_map a.active {
  background: rgba(0, 0, 0, 0.5);
}
#accueil_communes_liste {
  width: 40%;
}
#accueil_communes_liste li::before,
#comcom_elus_conseillers>ul>li>strong::before {
  content: '\25BA';
}
/* ComCom */
#comcom_elus_conseillers {
  background: #F5F2F2;
}
#comcom_elus_conseillers h2,
#comcom_elus_commissions h2 {
  text-align: center;
}
#comcom_elus_conseillers>ul>li {
  margin-top: 1em;
  padding-bottom: 1em;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #B1C800;
}
#comcom_elus_conseillers>ul>li>strong {
  font-weight: 600;
  width: 70%;
}
#comcom_elus_commissions>ul {
  justify-content: center;
  align-items: stretch;
}
#comcom_elus_commissions>ul>li {
  padding: 10px;
  background: rgba(253, 163, 50, 0.2);
  font-size: 0.8em;
}
#comcom_elus_commissions h3,
#marchespublics h3 {
  margin-bottom: 10px;
  color: #007BB8;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
}
#marchespublics>ul>li {
  flex-direction: column;
  border: 1px solid #B1C800;
}
#marchespublics>ul>li p:last-of-type {
  text-align: center;
}
#comcom_competences {
  background: url(../images/bg-competences.webp) top center no-repeat;
  background-size: cover;
}
#comcom_competences ul {
  justify-content: space-between;
  align-items: stretch;
}
#comcom_competences li {
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  color: #FFF;
  text-align: center;
}
#comcom_competences li img {
  display: block;
  margin: 0 auto;
  width: 50%;
}
/* Quotidien */
#dechets_acceptes_refuses {
  padding-top: 0;
}
#dechets_acceptes_refuses>div {
  padding: 5vw;
  background: linear-gradient(180deg, #FDA332 0%, #FFF 100%);
}
#dechets_acceptes_refuses h2 {
  text-align: center;
}
#dechets_acceptes_refuses>div>div:first-of-type {
  position: relative;
}
#dechets_acceptes_refuses>div>div:first-of-type:after {
  content: '';
  position: absolute;
  top: 20%;
  right: -4%;
  height: 60%;
  width: 5px;
  background: #007BB8;
}
#maison_sante_praticiens>li {
  margin-bottom: 2vw;
  font-size: 0.8em;
}
#maison_sante_praticiens>li>img {
  width: 100%;
}
#maison_sante_praticiens h3 {
  color: #FDA332;
  font-weight: 500;
}
#maison_sante_praticiens h4 {
  font-weight: 600;
  margin-bottom: 0.5em;
}
#maison_sante_praticiens ul {
  list-style: none;
  margin-top: -0.5em;
  padding-left: 5px;
}
#maison_sante_praticiens ul li::before {
  content: '• ';
}
#maison_sante_praticiens p.adresse {
  padding-left: 15px;
  background: url(../images/ico-carte.svg) no-repeat top 3px left 2px;
  background-size: 8px;
}
#maison_sante_praticiens p.tel {
  padding-left: 15px;
  background: url(../images/ico-telephoneBleu.svg) no-repeat top 3px left;
  background-size: 12px;
}
/* Contact */
article.contact {
  max-width: 1000px;
  margin: 0 auto;
}
#contact>div {
  width: 40%;
  margin: 0 5%;
}
#contact h2 {
  font-size: 1.5em;
}
#contact img {
  width: 40%;
  margin: 0 30%;
}
#contact>div p {
  padding-left: 20px;
  background: url(../images/ico-carte.svg) no-repeat top 5px left;
  background-size: 10px;
}
#contact>div p:nth-of-type(2) {
  background-image: url(../images/ico-telephoneBleu2.svg);
  background-size: 12px;
}
#contact>div p:last-of-type {
  background-image: url(../images/ico-horaires.svg);
  background-size: 12px;
}
#contact_map iframe {
  display: block;
  width: 100%;
  height: 400px;
}
.formulaire h2 {
  text-align: center;
}
.formulaire>* {
  margin-bottom: 1.5em;
}
.formulaire label:not(input + label),
.formulaire input[type=file] {
  display: none;
}
.formulaire input[type=text],
.formulaire input[type=email],
.formulaire input[type=tel],
.formulaire textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background: #FFFFFF;
  border: 1px solid #007BB8;
  color: #000;
  font-family: inherit;
  font-size: 1em;
}
.confirmation {
  color: green;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
}
.erreur {
  color: red;
  border-color: red !important;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
}
/* Agenda */
.evenements_liste h2,
#evenement h2 {
  text-align: center;
}
#evenement {
  max-width: 900px;
  margin: 0 auto;
}
#evenement img {
  display: block;
  margin: 0 auto 2.5vw;
}
.pratique {
  color: #007BB8;
  margin: 2.5vw 0;
  padding-top: 1em;
  border-top: 1px solid #007BB8;
}
/* Pratiques */
#nav_page{
  margin: 2.5vw calc(20vw + 100px) 0 20vw;
}
#nav_page ul{
  display: flex;
  justify-content: space-around;
  list-style: none;
}
#nav_page ul li a{
  display: block;
  padding: 0.5em;
  color: #007BB8;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid #FFF;
}
#nav_page ul li a:hover{
  color: #A8C100;
  border-bottom: 2px solid #A8C100;
}
body.infos_pratiques article:nth-of-type(even){
  background: #F5F2F2;
}
/* PopIn */
#popIn {
  z-index: 4;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}
#popIn figure {
  position: relative;
  height: 80vh;
  max-width: 80vw;
  color: #FFF;
  text-align: center;
}
#popIn figure>img {
  max-height: 70vh;
  max-width: 80vw;
}
#popInClose {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  right: 0;
  width: 15px;
  height: 15px;
  padding: 7.5px;
  margin-top: -20px;
  margin-right: -20px;
  border-radius: 50%;
  background: #FBBC43;
  color: #14697E;
  font-weight: bold;
  cursor: pointer;
}
/* Génériques */
.bfleche {
  display: block;
  width: 15px;
  height: 15px;
  padding: 10px;
  background: #B1C800;
  border-radius: 50%;
}
.bfleche img {
  display: block;
  width: 15px;
}
.bouton,
.bouton:link,
.bouton:active,
.bouton:visited {
  display: inline-block;
  margin: 5px auto;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid #B1C800;
  background: #B1C800;
  color: #FFF;
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.boutons>a:hover,
.boutons>*:hover,
.bouton:hover,
.accueil header a.bouton:hover {
  background: #FFF;
  color: #B1C800;
}
.boutons {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.large1000,
.large1200 {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
  box-sizing: border-box;
}
.large1200 {
  max-width: 1200px;
}
.largeFull {
  width: 100%;
  margin: 0;
  padding: 0;
}
.col2,
.col3,
.col4,
.col5 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  list-style: none;
}
.col4 {
  justify-content: flex-start;
}
.col2>* {
  width: 48%;
  box-sizing: border-box;
}
.col3>* {
  width: 31%;
  box-sizing: border-box;
}
.col4>* {
  width: 23%;
  margin: 1vw 1%;
  box-sizing: border-box;
}
.col5>* {
  width: 18%;
  margin: 1vw 1%;
  box-sizing: border-box;
}
.sommaire {
  justify-content: center;
  align-items: stretch;
}
article ul.sommaire>li {
  padding-bottom: 10px;
  background: #007BB8;
  color: #FFF;
  font-size: 0.8em;
  text-align: center;
}
nav .sommaire li:hover {
  background: #B1C800;
}
.sommaire>li img {
  width: 100%;
}
.sommaire>li>h3 {
  font-size: 1.1em;
  font-weight: 600;
}
#telechargements h2 {
  text-align: center;
}
.telechargements>li {
  margin-bottom: 20px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  background: #F5F2F2;
}
.telechargements>li a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.telechargements>li a:hover {
  color: #B1C800;
}
.telechargements img {
  margin-left: 10px;
  height: 1.2em;
}
section {
  min-height: 55vh;
  overflow: hidden;
}
article {
  padding: 5vw calc(5vw + 100px) 5vw 5vw;
  overflow: hidden;
}
aside {
  overflow: hidden;
}
.presentation {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.presentation nav.boutons {
  margin: 5vw 0;
}
.presentation .col2 {
  justify-content: center;
}
.presentation .col2>* {
  margin: 1vw 1%;
}
.description {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.description>h2 {
  width: 30%;
}
.description>img {
  width: 28%;
  margin-right: 2%;
  height: 100%;
}
.description>div {
  width: 66%;
  box-sizing: border-box;
  padding: 20px;
  border-left: 5px solid #FDA332;
}
.description h3 {
  display: flex;
  align-items: flex-start;
  font-weight: 600;
}
.description h3:not(:first-of-type) {
  margin-top: 2.5vw;
}
.description h3 .bfleche {
  flex: 0 0 auto;
  margin: -0.2em 10px 0 0;
}
.description table {
  margin-bottom: 1em;
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  background-color: #FFF;
}
.description table tr:nth-child(even) {
  background: #B1C800;
}
.description table th {
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  background-color: #B1C800;
  border: 1px #000 solid;
  padding: 3px;
}
.description table td {
  border: 1px solid #000;
  vertical-align: top;
  padding: 3px;
}
.annuaire .description {
  margin-bottom: 5vw;
}
.annuaire .description>div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
aside.avoiraussi {
  padding: 5vw;
  background: linear-gradient(180deg, #F5F2F2 75%, #FFF 75%)
}
aside.avoiraussi h2 {
  text-align: center;
}
aside.avoiraussi .col4 {
  justify-content: center;
  align-items: stretch;
}
aside.avoiraussi .col4>li {
  width: 21%;
  margin: 2vw 2%;
}
aside.avoiraussi a.bouton {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px 0;
  box-shadow: 5px 5px 10px #000;
  font-size: 0.8em;
  font-weight: 500;
  text-transform: none;
}
section h2 {
  margin-bottom: 0.5em;
  color: #007BB8;
  font-size: 2em;
  font-weight: 300;
  white-space: pre-line;
}
section h2 strong {
  font-weight: 600;
}
p {
  margin-bottom: 0.5em;
}
a:link,
a:active,
a:visited {
  text-decoration: none;
  color: inherit;
}
article p a:link,
article p a:active,
article p a:visited {
  text-decoration: underline;
}
article ul {
  list-style-position: inside;
}

article.presentation li{
  text-align: left;
}
img {
  max-width: 100%;
}
/* Animations */
.animTranslateL {
  position: relative;
  left: -50%;
  opacity: 0;
  transition: 2s all ease;
}

.animTranslateR {
  position: relative;
  right: -50%;
  opacity: 0;
  transition: 2s all ease;
}

.animTranslateL.show {
  opacity: 1;
  left: 0;
}

.animTranslateR.show {
  opacity: 1;
  right: 0;
}

@keyframes fleche {
  0% {
    bottom: 3px
  }

  50% {
    bottom: 10px
  }

  100% {
    bottom: 3px
  }
}

#top>div>* {
  position: absolute;
  animation-name: fleche;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}
/* RGPD */
@keyframes anim-rgpd {
  from {
    bottom: -100px;
  }
  to {
    bottom: 0;
  }
}
#rgpd {
  position: fixed;
  background-color: #007BB8;
  color: #FFF;
  border-top: 1px solid #FFF;
  bottom: 0;
  width: 100%;
  min-height: 50px;
  z-index: 9999;
  animation-name: anim-rgpd;
  animation-duration: 1s;
}
#rgpd span.rgpd-fermer {
  position: absolute;
  display: block;
  right: 0;
  top: 0;
  margin: 5px;
  padding: 3px;
  width: auto;
  cursor: pointer;
}
#rgpd>div {
  max-width: 1200px;
  padding: 10px 20px 10px 10px;
  margin: 0 auto
}
#rgpd p a {
  color: inherit;
  text-decoration: underline;
}
#rgpd_f button {
  border: 1px solid #FFF;
  padding: 3px;
  font-family: inherit;
}
.mobile {
  display: none;
}
.cacher {
  display: none !important;
}
@media screen and (max-width:1280px) {
  #fil_ariane {
    width: calc(97.5vw + -100px);
  }
}
@media screen and (max-width:1080px) {
  /* Tablettes */
  #nav_haut {
    font-size: 0.8em;
  }
  #accueil_agenda h3 {
    font-size: 8em;
  }
}
@media screen and (min-width:975px) and (max-height:800px) {
  #nav_droite {
    height: calc(100vh - 150px);
  }
  #nav_droite img {
    width: 5vh;
  }
}
@media screen and (max-width:975px) {
  /* Smartphones */
  header{
    flex-direction: column;
    justify-content: space-between;
  }
  #menu {
    position: relative;
    padding: 0;
    width: 100%;
    top: 0;
    left: 0;
    flex-direction: column;
  }
  #mobile_menu {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
  }
  #mobile_menu .fermer {
    display: block;
  }
  #menu h2 {
    margin: 10px auto;
    width: 90%;
    height: auto;
    max-width: none;
  }
  #menu h2 img {
    width: 30vw;
    max-width: 150px;
    margin: 0 auto;
  }
  #menu_nav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    background: #FFF;
  }
  #nav_haut {
    position: relative;
    flex-direction: column;
  }
  #nav_haut>li {
    margin: 0;
    justify-content: center;
    border-bottom: 1px solid #007BB8;
    flex-direction: column;
  }
  #nav_haut>li>a,
  #nav_haut>li>span {
    padding: 0;
    width: 100%;
  }
  #nav_haut>li.active>ul,
  #nav_haut>li:nth-of-type(5):hover>ul {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    background: #007BB8;
  }
  #nav_haut>li>ul>li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #FFF;
  }
  #nav_droite {
    position: relative;
    top: 0;
    width: 100%;
    min-height: auto;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }
  #nav_droite>li {
    width: 50%;
    box-sizing: border-box;
    border-bottom: 1px solid #FFF;
  }
  #nav_droite li:last-of-type {
    border: 0;
  }
  #nav_droite>li>a {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  header h1 {
    margin: 0 5vw 0;
    padding-top: 50px;
    text-align: center;
  }
  #fil_ariane {
    width: 100%;
  }
  footer nav ul {
    flex-wrap: wrap;
  }
  footer nav ul li {
    width: 80%;
  }
  footer .bfleche {
    bottom: calc(2.5vw + 80px);
  }
  /* Accueil */
  .accueil header h1 {
    padding: 10vh 5vw 0;
  }
  #accueil_actualites {
    flex-direction: column;
    padding: 5vw;
  }
  #accueil_actualites>div {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  #accueil_actualites>nav {
    width: 100%;
    padding: 0;
  }
  #accueil_agenda h3 {
    font-size: 4em;
  }
  #accueil_agenda h2 {
    width: 100%;
    margin: -3.1em 0 5vw;
  }
  #accueil_territoire {
    padding-top: 50vh;
  }
  #accueil_territoire>div {
    width: 90%;
    padding: 5vw 5%;
  }
  #accueil_communes {
    flex-direction: column;
    background-image: linear-gradient(180deg, #FFF 45%, rgba(255, 255, 255, 0.5) 65%), url(../images/bg-chemin-terre.webp);
  }
  #accueil_communes_map {
    width: 100%;
    height: 90vw;
    padding: 0;
  }
  #accueil_communes_liste {
    width: 100%;
    margin: 0;
    min-height: auto;
  }
  #accueil_communes .col2 li {
    width: 48%;
  }
  /* Com Com*/
  #comcom_elus_conseillers>ul>li {
    flex-direction: column;
  }
  #comcom_elus_conseillers>ul>li>strong {
    width: 100%;
  }
  #marchespublics {
    margin: 0;
  }
  #comcom_competences {
    padding-right: 5vw;
  }
  #comcom_competences li {
    width: 48%;
    margin-bottom: 4vw;
  }
  #dechets_acceptes_refuses>div>div:first-of-type:after {
    bottom: -10px;
    top: unset;
    right: unset;
    left: 5%;
    width: 90%;
    height: 5px;
  }
  /* Agenda */
  .evenements_liste {
    padding: 5vw;
  }
  /* Pratique */
  #nav_page {
    margin: 2.5vw 10vw 0;
  }
  #nav_page ul{
    flex-direction: column;
  }
  /* Génériques */
  article {
    padding: 5vw;
  }
  .presentation {
    padding: 5vw;
  }
  .col2>*,
  .col3>*,
  .col4>*,
  .description>h2,
  .description>div,
  .description>img,
  #contact>form,
  #contact>div {
    flex: none;
    margin: 0;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  .col5>* {
    width: 48%;
  }
  .sommaire {
    justify-content: space-between;
  }
  .sommaire>li {
    width: 48%;
  }
  .telechargements>li {
    flex-direction: column;
    text-align: center;
  }
  aside.avoiraussi .col4>li {
    width: 46%;
  }
  /* Mobile */
  .mobile {
    display: block;
  }
  .mobile_no {
    display: none !important;
  }
}