@charset "UTF-8";
/*=============================================================
  Variables
=============================================================*/
:root {
  --couleur-principale: #e9f9ff;
  --couleur-secondaire: #717171;
  --couleur-ternaire: #d9d9d9;
  --couleur-noir: #454545;
  --couleur-blanc: #f9f9fd;
  --couleur-vert: #7ed169;
  --couleur-boutons: #FAA85F;
  --couleur-texte-actif: #A24F04;
  --box-shadow: 0px 4px 10px 2px;
  --border-radius: 20px;
  --transition: all 0.3s ease;
  --police-sub: 16px;
  --police-normal: 18px;
  --police-sup: 20px;
  --police-grande: 24px;
  --police-tres-grande: 32px;
  --police-titre-page: 48px;
}

/*=============================================================
  Génériques
=============================================================*/
html {
  scroll-padding-top: 128px;
}
.g-recaptcha {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
html,
body {
  font-family: sans-serif;
  color: var(--couleur-noir);
  background-color: var(--couleur-blanc);
  width: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-size: 16px;
}

a {
  text-decoration: none;
  color: var(--couleur-noir);
}

ul {
  list-style-type: none;
  width: 70%;
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0;
  font-size: 48px;
}

img {
  background-color: #f5dec7;
}

header.wrapper,
footer .wrapper {
  width: clamp(320px, 90%, 1200px);
  margin: auto;
  box-sizing: border-box;
}

section:not(section.events-bulletins,
section.contact,
section.sommaire,
section.erreur404,
section.prochain_event,
section.evenements,
section.ecole_yviers,
section.derniere_realisation,
section.projets_eleves,
section.realisations_eleves,
section.carte_commune,
section.budgets_section,
section.recensement_section,
section.demarches_section,
section.projets_section),
div.wrapper:not(footer .wrapper) {
  width: clamp(300px, 90%, 1000px);
  margin: 0 auto;
  position: relative;
}

svg {
  width: 30px;
  height: 30;
}

footer {
  color: var(--couleur-noir);
  background-color: #f5dec7;
}

/*=============================================================
  Layout
=============================================================*/
.menu.menu-principal {
  line-height: 60px;
}
.menu.menu-principal li {
  cursor: pointer;
}
.menu.menu-principal li a {
  display: block;
  padding: 0 12px;
}

.menu.menu-principal :last-child li.item {
  margin: 5px 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 99;
  background-color: var(--couleur-blanc);
  box-shadow: 0px 4px 10px 2px var(--couleur-secondaire);
}
header nav.menu.menu-principal {
  width: clamp(320px, 90%, 1200px);
  margin: 0 calc((100% - clamp(320px, 90%, 1200px)) / 2);
}
header svg.menu-burger {
  display: none;
}
header ul.liste-liens {
  width: -moz-fit-content;
  width: fit-content;
}
header ul.liste-liens li.item {
  transition: var(--transition);
}
header ul.liste-liens li.item a {
  padding: 0 24px;
  -webkit-text-decoration: underline transparent;
          text-decoration: underline transparent;
  transition: var(--transition);
}
header ul.liste-liens li.item span > svg {
  width: 12px;
  height: 12px;
}
header ul.liste-liens li.item:hover:not(.actif) {
  background-color: #f5dec7;
}
header ul.liste-liens li.item.actif {
  background-color: #faa85f;
}
header ul.liste-liens li.item.langues {
  position: relative;
}
header ul.liste-liens li.item.langues a {
  display: flex;
  align-items: center;
}
header ul.liste-liens li.item.langues a span {
  display: flex;
  margin-left: 6px;
}
header ul.liste-liens li.item.langues a span svg {
  transform: rotate(180deg);
  transition: var(--transition);
}
header ul.liste-liens li.item.langues ul.liste_langues {
  display: none;
  position: absolute;
  bottom: 0;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  transform: translate(100%, -150%);
  transition: var(--transition);
  background-color: var(--couleur-blanc);
  border-radius: 0 0 16px 16px;
}
header ul.liste-liens li.item.langues ul.liste_langues li.langue {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
header ul.liste-liens li.item.langues ul.liste_langues li.langue a {
  color: var(--couleur-noir);
  padding: 6px 24px 12px 24px;
  width: -moz-fit-content;
  width: fit-content;
  height: 56px;
}
header ul.liste-liens li.item.langues ul.liste_langues li.langue:hover a {
  color: var(--couleur-boutons);
}
header ul.liste-liens li.item.langues:hover a span svg {
  transform: rotate(0deg);
}
header ul.liste-liens li.item.langues:hover ul.liste_langues {
  display: block;
  transform: translate(12px, 100%);
}

.btn.btn-principal,
ul.liste-liens:not(.actif) > li.item.btn-contact {
  min-width: 135px;
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: var(--police-sup);
  font-weight: 600;
  box-shadow: 0px 0px 10px 2px var(--couleur-texte-actif);
  outline: none;
  border: none;
  color: var(--couleur-noir);
  background-color: var(--couleur-boutons);
  border-radius: var(--border-radius);
  transition: var(--transition);
}

ul.liste-liens:not(.actif) > li.item.btn-contact {
  margin: 6px 0;
}

ul.liste-liens:not(.actif) > li.item.btn-contact a {
  color: var(--couleur-blanc);
}

.btn:hover {
  box-shadow: none;
}

div.titre-recherche {
  position: relative;
  box-sizing: border-box;
  margin-top: 62px;
}
div.titre-recherche .image {
  width: 100%;
  height: min(100vh - 60px - 32px, 640px);
  aspect-ratio: auto;
  overflow: hidden;
}
div.titre-recherche .image img {
  width: 100%;
  height: auto;
  -o-object-position: 0 -300px;
     object-position: 0 -300px;
  -o-object-fit: cover;
     object-fit: cover;
}
div.titre-recherche div.absolut {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
div.titre-recherche div.absolut h2.titre-page {
  text-align: center;
  font-size: var(--police-titre-page);
  padding: 32px 42px;
  border-radius: var(--border-radius);
  background-color: rgba(27, 27, 27, 0.8);
  color: var(--couleur-blanc);
  font-weight: 400;
  margin: 0;
}

.bouton-tout {
  width: 110px;
  position: absolute;
  top: 0;
  right: 0;
  text-align: end;
  text-transform: uppercase;
  transition: var(--transition);
}
.bouton-tout p {
  margin: 0;
}

.bouton-tout:hover {
  letter-spacing: 2px;
}

div.evenements .bouton-tout p,
div.bulletins .bouton-tout p {
  margin: 20px 0;
}

h3.titre-section {
  margin-bottom: 15px;
  font-size: var(--police-sup);
}
h3.titre-section a {
  display: inline-block;
  width: -moz-max-content;
  width: max-content;
  height: 32px;
  line-height: 32px;
  margin: 0 0 0 6px;
  font-size: var(--police-normal);
  font-weight: var(--light);
  text-decoration: underline;
}

hr {
  width: 30px;
  display: inline-block;
  margin: 0 0 22px 0;
  border-top: 1px solid var(--couleur-noir);
}

body section.en1clic {
  margin: 50px auto 75px;
}
body section.en1clic a {
  cursor: pointer;
  margin: 8px 10px;
  text-align: center;
  background-color: #fdfaf5;
  border-radius: var(--border-radius);
  transition: var(--transition);
  box-shadow: 0 4px 10px 2px var(--couleur-boutons);
}
body section.en1clic a svg {
  width: 60px;
  height: 60px;
  margin: 12px auto 9px;
}
body section.en1clic a .bouton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
  color: var(--couleur-noir);
  width: 150px;
  min-height: 64px;
  height: -moz-max-content;
  height: max-content;
  padding-bottom: 12px;
  box-sizing: border-box;
  font-weight: 600;
}
body section.en1clic a .bouton svg {
  width: 24px;
  height: 24px;
  margin: 0;
}
body section.en1clic a .bouton svg.icon-tabler-external-link {
  stroke: var(--couleur-noir);
}
body section.en1clic a:hover,
body section.en1clic a.actif {
  background-color: #ffe6cc;
}

.events-bulletins {
  padding: 75px 0;
  margin-bottom: 75px;
  background-color: var(--couleur-principale);
}
.events-bulletins .evenements {
  width: min(100%, 450px);
  position: relative;
}
.events-bulletins .evenements article {
  background-color: var(--couleur-blanc);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) #717171;
}
.events-bulletins .evenements article.event-principal {
  width: 450px;
  height: 200px;
}
.events-bulletins .evenements .events .event-principal {
  margin-top: 20px;
}
.events-bulletins .evenements h4 {
  margin: 0;
}
.events-bulletins .events svg {
  width: 20px;
  height: 20px;
  color: var(--couleur-noir);
}
.events-bulletins .events .date,
.events-bulletins .events .dates {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 16px 57.5px 0;
  overflow: hidden;
  text-align: center;
  color: var(--couleur-noir);
  background-color: var(--couleur-vert);
  border-radius: 100%;
}
.events-bulletins .events .date span,
.events-bulletins .events .dates span {
  margin-bottom: 20px;
  line-height: 20px;
  font-size: var(--police-normal);
}
.events-bulletins .events .date h4,
.events-bulletins .events .dates h4 {
  margin-top: 20px;
  line-height: 40px;
  font-size: var(--police-tres-grande);
}
.events-bulletins .events div.bouton-savoirplus {
  width: -moz-fit-content;
  width: fit-content;
  height: 35px;
  line-height: 35px;
  margin: auto;
  padding: 0 16px;
  text-align: center;
  color: var(--couleur-noir);
  font-weight: 600;
  background-color: var(--couleur-boutons);
  border-radius: 10px;
  transition: var(--transition);
}
.events-bulletins .events article:hover div.bouton-savoirplus {
  box-shadow: var(--box-shadow) var(--couleur-boutons);
}
.events-bulletins .events .event-principal .date,
.events-bulletins .events .event-principal .dates {
  width: 150px;
  height: 150px;
  margin: 25px 32px 25px 24px;
}
.events-bulletins .events .event-principal .date h4,
.events-bulletins .events .event-principal .dates h4 {
  margin-top: 42px;
  line-height: 40px;
  font-size: 42px;
}
.events-bulletins .events .event-principal .date > span,
.events-bulletins .events .event-principal .dates > span {
  margin-bottom: 42px;
  line-height: 26px;
  font-size: var(--police-sup);
}
.events-bulletins .events .event-principal .dates h4 {
  font-size: 36px;
}
.events-bulletins .events .event-principal .contenu h5.titre {
  margin: 24px 0 12px 0;
  font-size: var(--police-sup);
}
.events-bulletins .events .event-principal .contenu p.lieu {
  margin: 1em 0 0.5em 0;
}
.events-bulletins .events .event-principal .contenu p.horaires {
  margin: 0.5em 0 1em 0;
}
.events-bulletins .events .event-principal .contenu p.lieu svg,
.events-bulletins .events .event-principal .contenu p.horaires svg {
  margin-right: 6px;
}
.events-bulletins .events .event-principal .contenu div.bouton-savoirplus {
  margin: 0;
}
.events-bulletins .bulletins {
  position: relative;
  width: 300px;
  height: 100%;
}
.events-bulletins .bulletins div.bulletins_recent {
  height: -moz-fit-content;
  height: fit-content;
  align-items: center;
}
.events-bulletins .bulletins div.bulletins_recent div.image {
  width: 224px;
  height: 320px;
  background-color: #717171;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.events-bulletins .bulletins div.bulletins_recent div.image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  transition: var(--transition);
}
.events-bulletins .bulletins div.bulletins_recent div.image:hover img {
  scale: 1.1;
}
.events-bulletins .bulletins div.bulletins_recent h4 {
  text-align: center;
}
.events-bulletins .bulletins.troisbulletins {
  width: 100%;
}
.events-bulletins .bulletins.troisbulletins .bulletins_recent a {
  margin: 12px 16px;
}

section.prochain_event {
  padding: 75px 0;
  background-color: var(--couleur-principale);
}

section.prochain_event,
section.evenements {
  padding: 75px 0;
  margin-bottom: 75px;
}
section.prochain_event article,
section.evenements article {
  background-color: var(--couleur-blanc);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) #717171;
}
section.prochain_event article.event-principal,
section.evenements article.event-principal {
  width: min(100%, 450px);
  height: 200px;
}
section.prochain_event .events,
section.evenements .events {
  gap: 32px 24px;
}
section.prochain_event .events svg,
section.evenements .events svg {
  width: 20px;
  height: 20px;
  color: var(--couleur-noir);
}
section.prochain_event .events .date,
section.evenements .events .date {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 16px 57.5px 0;
  overflow: hidden;
  text-align: center;
  color: var(--couleur-noir);
  background-color: var(--couleur-vert);
  border-radius: 100%;
}
section.prochain_event .events .date h4,
section.evenements .events .date h4 {
  margin-top: 20px;
  line-height: 40px;
  font-size: var(--police-tres-grande);
}
section.prochain_event .events .date span,
section.evenements .events .date span {
  margin-bottom: 20px;
  line-height: 20px;
  font-size: var(--police-normal);
}
section.prochain_event .events .date.date-debut,
section.evenements .events .date.date-debut {
  margin: 8px 16px 0;
}
section.prochain_event .events .dates,
section.evenements .events .dates {
  position: relative;
  margin-top: 24px;
}
section.prochain_event .events .date.date-fin,
section.evenements .events .date.date-fin {
  position: absolute;
  top: 0px;
  left: 96px;
  margin: 0;
  z-index: 30;
}
section.prochain_event .events svg.fleche,
section.evenements .events svg.fleche {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 52px;
  left: 140px;
  margin: 0;
  z-index: 50;
  color: var(--couleur-noir);
}
section.prochain_event .events div.bouton-savoirplus,
section.evenements .events div.bouton-savoirplus {
  width: -moz-fit-content;
  width: fit-content;
  height: 35px;
  line-height: 35px;
  margin: auto;
  padding: 0 16px;
  text-align: center;
  color: var(--couleur-blanc);
  background-color: var(--couleur-boutons);
  border-radius: 10px;
  transition: var(--transition);
}
section.prochain_event .events .event-principal .date,
section.evenements .events .event-principal .date {
  width: 150px;
  height: 150px;
  margin: 0 32px 25px 32px;
}
section.prochain_event .events .event-principal .date h4,
section.evenements .events .event-principal .date h4 {
  margin: 42px auto 0 auto;
  line-height: 40px;
  font-size: 42px;
}
section.prochain_event .events .event-principal .date span,
section.evenements .events .event-principal .date span {
  margin-bottom: 42px;
  line-height: 26px;
  font-size: var(--police-sup);
}
section.prochain_event .events .event-principal .date:not(.date-debut, .date-fin),
section.evenements .events .event-principal .date:not(.date-debut, .date-fin) {
  margin: 0px 32px 25px 72px;
}
section.prochain_event .events .event-principal .contenu h5.titre,
section.evenements .events .event-principal .contenu h5.titre {
  margin: 24px 0 12px 0;
  font-size: var(--police-sup);
}
section.prochain_event .events .event-principal .contenu div.bouton-savoirplus,
section.evenements .events .event-principal .contenu div.bouton-savoirplus {
  margin: 0;
}

section.prochain_event {
  margin: 0;
}
section.prochain_event div.wrapper h3.titre-section {
  margin-top: 0;
}
section.prochain_event div.events article.event-principal {
  scroll-margin-top: 64px;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  padding: 24px 0;
  margin-bottom: 24px;
}
section.prochain_event div.events article.event-principal div.date:not(.date-debut, .date-fin) {
  margin-top: 24px;
}
section.prochain_event div.events article.event-principal div.contenu {
  width: calc(100% - 324px);
  margin-bottom: 24px;
}
section.prochain_event div.events article.event-principal div.contenu h5.titre {
  margin-bottom: 6px;
}
section.prochain_event div.events article.event-principal div.contenu p.infos_principales {
  margin: 0 0 24px 0;
}
section.prochain_event div.events article.event-principal div.contenu p.description {
  line-height: 130%;
  margin: 0 0 24px 0;
}
section.prochain_event div.events article.event-principal div.contenu a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}

section.evenements article:hover div.bouton-savoirplus,
section.prochain_event article div.bouton-savoirplus:hover {
  box-shadow: var(--box-shadow) var(--couleur-boutons);
}

section.evenements div.wrapper h3.titre-section {
  margin-top: 0;
}

section.bulletins {
  padding: 128px 0 0 0;
}
section.bulletins .bulletins {
  position: relative;
  width: 100%;
  height: 100%;
}
section.bulletins .bulletins .bouton-tout p {
  margin: 0;
}
section.bulletins .bulletins ul.liste_bulletins {
  width: 100%;
}
section.bulletins .bulletins ul.liste_bulletins li.bulletins_recent {
  margin: 12px 16px;
  align-items: center;
}
section.bulletins .bulletins ul.liste_bulletins li.bulletins_recent div.image {
  width: 224px;
  height: 320px;
  background-color: #717171;
  border-radius: var(--border-radius);
  overflow: hidden;
}
section.bulletins .bulletins ul.liste_bulletins li.bulletins_recent div.image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
section.bulletins .bulletins ul.liste_bulletins li.bulletins_recent h4 {
  text-align: center;
}

section.habitants {
  margin-top: 75px;
}
section.habitants .liste-domaines .artisans,
section.habitants .liste-domaines .associations,
section.habitants .liste-domaines .gites-hebergements {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: var(--border-radius);
  transition: var(--transition);
  overflow: hidden;
}
section.habitants .liste-domaines .artisans h4.titre-categorie,
section.habitants .liste-domaines .associations h4.titre-categorie,
section.habitants .liste-domaines .gites-hebergements h4.titre-categorie {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 25px 0;
  line-height: 25px;
  text-align: center;
  font-weight: 500;
  font-size: var(--police-sup);
  color: var(--couleur-blanc);
  background-color: rgba(27, 27, 27, 0.8);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}
section.habitants .liste-domaines .artisans h4.titre-categorie svg,
section.habitants .liste-domaines .associations h4.titre-categorie svg,
section.habitants .liste-domaines .gites-hebergements h4.titre-categorie svg {
  width: 24px;
  height: 24px;
  stroke: var(--couleur-blanc);
}
section.habitants .liste-domaines .artisans img,
section.habitants .liste-domaines .associations img,
section.habitants .liste-domaines .gites-hebergements img {
  transform: scale(1);
  transition: var(--transition);
  border-radius: var(--border-radius);
  overflow: hidden;
}
section.habitants .liste-domaines a:hover > div img {
  transform: scale(1.1);
}

div.popup {
  z-index: -1;
  transition: z-index 0.3s linear;
}
div.popup div.fond {
  position: fixed;
  z-index: -1;
  opacity: 0;
  transition: z-index 0.3s linear, opacity 0.3s linear;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
}
div.popup div.image {
  width: 800px;
  height: 500px;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  opacity: 0;
  transition: z-index 0.3s linear, opacity 0.3s linear;
  transform: translate(-50%, -50%);
}
div.popup div.image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 6px;
}
div.popup div.image span {
  position: absolute;
  top: 12px;
  right: -36px;
  font-size: 36px;
  color: white;
  cursor: pointer;
}
div.popup div.image h5 {
  position: absolute;
  left: 0;
  bottom: -16px;
  line-height: 24px;
  color: white;
  margin: 0;
  width: 800px;
  height: -moz-fit-content;
  height: fit-content;
  transform: translateY(100%);
  font-size: 20px;
  font-weight: 400;
  font-family: sans-serif;
  text-align: center;
}

div.popup.actif {
  z-index: 60;
}
div.popup.actif div.fond,
div.popup.actif div.image {
  z-index: 90;
  opacity: 1;
  transition: opacity 0.3s linear;
}
div.popup.actif div.fond {
  transition: opacity 0.3s linear;
}

section.galerie_photo {
  padding-bottom: 128px;
}

section.galerie_photo > .galerie {
  display: flex;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  gap: 0;
  transition: 0.3s;
}
section.galerie_photo > .galerie .galerie__colonne {
  display: flex;
  flex-direction: column;
  gap: 0;
}
section.galerie_photo > .galerie .galerie__lien {
  margin: 0;
  overflow: hidden;
  padding: 12px;
  cursor: pointer;
}
section.galerie_photo > .galerie .galerie__lien:hover .galerie__image {
  transform: scale(1.1);
}
section.galerie_photo > .galerie .galerie__lien:hover .galerie__caption {
  opacity: 1;
}
section.galerie_photo > .galerie .galerie__miniature {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
section.galerie_photo > .galerie .galerie__image {
  display: block;
  width: 280px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: 0.3s;
}
section.galerie_photo > .galerie .galerie__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 25px 15px 15px;
  width: calc(100% - 30px);
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  color: white;
  opacity: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  transition: 0.3s;
}

section.fiche,
section.bulletin {
  padding-bottom: 128px;
}
section.fiche div.box_iframe,
section.bulletin div.box_iframe {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  overflow: hidden;
  position: relative;
}
section.fiche div.box_iframe iframe,
section.bulletin div.box_iframe iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 21/29;
}
section.fiche div.box_iframe iframe html body,
section.bulletin div.box_iframe iframe html body {
  background-color: transparent !important;
}

section.carte_commune {
  padding: 53px 0 128px 0;
}
section.carte_commune a.image {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 12px;
  box-shadow: var(--box-shadow) var(--couleur-noir);
}
section.carte_commune a.image img {
  position: relative;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  -o-object-position: center;
     object-position: center;
}

section.budgets_section,
section.recensement_section {
  padding: 53px 0 128px 0;
}
section.budgets_section div.wrapper ul.liste_budgets,
section.budgets_section div.wrapper ul.liste_recensements,
section.recensement_section div.wrapper ul.liste_budgets,
section.recensement_section div.wrapper ul.liste_recensements {
  width: 100%;
  padding: 0;
  margin: 0;
}
section.budgets_section div.wrapper ul.liste_budgets li.budget,
section.budgets_section div.wrapper ul.liste_budgets li.recensement,
section.budgets_section div.wrapper ul.liste_recensements li.budget,
section.budgets_section div.wrapper ul.liste_recensements li.recensement,
section.recensement_section div.wrapper ul.liste_budgets li.budget,
section.recensement_section div.wrapper ul.liste_budgets li.recensement,
section.recensement_section div.wrapper ul.liste_recensements li.budget,
section.recensement_section div.wrapper ul.liste_recensements li.recensement {
  width: 234px;
  height: -moz-fit-content;
  height: fit-content;
  margin: 0 max(6px, (100% - 936px) / 3) 24px 0;
  border-radius: 12px;
  background-color: var(--couleur-blanc);
  box-shadow: 0 4px 4px 0 #9b9b9b;
}
section.budgets_section div.wrapper ul.liste_budgets li.budget a,
section.budgets_section div.wrapper ul.liste_budgets li.recensement a,
section.budgets_section div.wrapper ul.liste_recensements li.budget a,
section.budgets_section div.wrapper ul.liste_recensements li.recensement a,
section.recensement_section div.wrapper ul.liste_budgets li.budget a,
section.recensement_section div.wrapper ul.liste_budgets li.recensement a,
section.recensement_section div.wrapper ul.liste_recensements li.budget a,
section.recensement_section div.wrapper ul.liste_recensements li.recensement a {
  display: block;
  padding: 12px 0;
  margin: 0;
  border-radius: 12px;
}
section.budgets_section div.wrapper ul.liste_budgets li.budget svg,
section.budgets_section div.wrapper ul.liste_budgets li.recensement svg,
section.budgets_section div.wrapper ul.liste_recensements li.budget svg,
section.budgets_section div.wrapper ul.liste_recensements li.recensement svg,
section.recensement_section div.wrapper ul.liste_budgets li.budget svg,
section.recensement_section div.wrapper ul.liste_budgets li.recensement svg,
section.recensement_section div.wrapper ul.liste_recensements li.budget svg,
section.recensement_section div.wrapper ul.liste_recensements li.recensement svg {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 6px auto;
}
section.budgets_section div.wrapper ul.liste_budgets li.budget h4,
section.budgets_section div.wrapper ul.liste_budgets li.recensement h4,
section.budgets_section div.wrapper ul.liste_recensements li.budget h4,
section.budgets_section div.wrapper ul.liste_recensements li.recensement h4,
section.recensement_section div.wrapper ul.liste_budgets li.budget h4,
section.recensement_section div.wrapper ul.liste_budgets li.recensement h4,
section.recensement_section div.wrapper ul.liste_recensements li.budget h4,
section.recensement_section div.wrapper ul.liste_recensements li.recensement h4 {
  margin: 0 0 6px 0;
  text-align: center;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: medium;
}
section.budgets_section div.wrapper ul.liste_budgets li.budget span,
section.budgets_section div.wrapper ul.liste_budgets li.recensement span,
section.budgets_section div.wrapper ul.liste_recensements li.budget span,
section.budgets_section div.wrapper ul.liste_recensements li.recensement span,
section.recensement_section div.wrapper ul.liste_budgets li.budget span,
section.recensement_section div.wrapper ul.liste_budgets li.recensement span,
section.recensement_section div.wrapper ul.liste_recensements li.budget span,
section.recensement_section div.wrapper ul.liste_recensements li.recensement span {
  display: block;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: lighter;
}
section.budgets_section div.wrapper ul.liste_budgets li.budget:nth-child(4n),
section.budgets_section div.wrapper ul.liste_budgets li.recensement:nth-child(4n),
section.budgets_section div.wrapper ul.liste_recensements li.budget:nth-child(4n),
section.budgets_section div.wrapper ul.liste_recensements li.recensement:nth-child(4n),
section.recensement_section div.wrapper ul.liste_budgets li.budget:nth-child(4n),
section.recensement_section div.wrapper ul.liste_budgets li.recensement:nth-child(4n),
section.recensement_section div.wrapper ul.liste_recensements li.budget:nth-child(4n),
section.recensement_section div.wrapper ul.liste_recensements li.recensement:nth-child(4n) {
  margin-right: 0;
}

section.demarches_section {
  padding: 53px 0 128px 0;
  background-color: var(--couleur-principale);
}
section.demarches_section div.wrapper ul.liste_demarches {
  width: 100%;
  padding: 0;
  margin: 0;
  gap: 24px;
}
section.demarches_section div.wrapper ul.liste_demarches li.demarche {
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px 2px #717171;
  transition: var(--transition);
}
section.demarches_section div.wrapper ul.liste_demarches li.demarche a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
  padding: 16px 32px;
  color: var(--couleur-noir);
}
section.demarches_section div.wrapper ul.liste_demarches li.demarche a h4 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-family: sans-serif;
  font-weight: medium;
}
section.demarches_section div.wrapper ul.liste_demarches li.demarche a h4 svg {
  width: 24px;
  height: 24px;
  margin: 0;
}
section.demarches_section div.wrapper ul.liste_demarches li.demarche a h4 svg.icon-tabler-external-link {
  stroke: var(--couleur-noir);
}
section.demarches_section div.wrapper ul.liste_demarches li.demarche a span {
  display: block;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-family: sans-serif;
  font-weight: lighter;
}
section.demarches_section div.wrapper ul.liste_demarches li.demarche:hover {
  background-color: var(--couleur-boutons);
}

section.projets_section {
  padding: 53px 0 128px 0;
}

section.contact {
  margin: 0;
  background-color: #f5f5f5;
}
section.contact div.wrapper {
  padding: 75px 0;
}
section.contact .liste .telephone,
section.contact .liste .email,
section.contact .liste .adresse {
  width: 475px;
  margin: 40px 0;
}
section.contact .liste h4 {
  margin: 0;
  line-height: 40px;
}
section.contact .liste .encadrement {
  width: 475px;
  height: -moz-min-content;
  height: min-content;
  margin: 0;
  padding: 20px 0;
  text-align: center;
  background-color: var(--couleur-principale);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) var(--couleur-secondaire);
}

section.contactez-nous {
  margin: 75px 0;
  padding: 100px 0;
  align-items: center;
}
section.contactez-nous h3 {
  margin-right: 56px;
}
section.contactez-nous .formulaire-map {
  width: 1000px;
  height: -moz-min-content;
  height: min-content;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) var(--couleur-secondaire);
  background-color: var(--couleur-principale);
}
section.contactez-nous .formulaire-map .formulaire {
  width: 550px;
  padding: 32px 48px;
}
section.contactez-nous .formulaire-map .formulaire h4 {
  line-height: 64px;
  font-size: var(--police-tres-grande);
  margin-bottom: 6px;
}
section.contactez-nous .formulaire-map .formulaire p.message-valide {
  width: calc(100% - 4px - 64px);
  line-height: 24px;
  padding:24px 32px;
  margin:0;
  text-wrap:balance;
  text-align: center;
  background:#b6e5b6;
  border-radius:12px;
  font-size: 20px;
  border:2px dashed green;
}
section.contactez-nous .formulaire-map .formulaire p.message-echoue {
  width: calc(100% - 4px - 64px);
  line-height: 24px;
  padding:24px 32px;
  margin:0;
  text-wrap:balance;
  text-align: center;
  background:#fad2d2;
  border-radius:12px;
  font-size: 20px;
  border:2px dashed #c20000;
}
section.contactez-nous .formulaire-map .formulaire .champ:first-child {
  margin-top: 56px;
}
section.contactez-nous .formulaire-map .formulaire .champ {
  margin-bottom: 32px;
}
section.contactez-nous .formulaire-map .formulaire .champ.securite {
  height: 0px;
  margin: 0px 0 32px 0;
  padding: 0px;
  overflow: hidden;
}
section.contactez-nous .formulaire-map .formulaire .champ.securite * {
  margin: 0px;
  padding: 0px;
}
section.contactez-nous .formulaire-map .formulaire .champ.probleme input,
section.contactez-nous .formulaire-map .formulaire .textarea.probleme textarea {
  box-shadow: 0 0 10px 2px red;
}
section.contactez-nous .formulaire-map .formulaire label {
  display: block;
  font-weight: 600;
}
section.contactez-nous .formulaire-map .formulaire label span {
  font-weight: 200;
}
section.contactez-nous .formulaire-map .formulaire label p {
  display: inline;
}
section.contactez-nous .formulaire-map .formulaire input,
section.contactez-nous .formulaire-map .formulaire textarea {
  width: 100%;
  line-height: 56px;
  min-height: 48px;
  font-size: 18px;
  border-radius: 12px;
  border: none;
  outline: none;
  box-shadow: 0 0 10px 2px var(--couleur-secondaire);
  margin-top: 6px;
  padding: 12px 24px;
  box-sizing: border-box;
}
section.contactez-nous .formulaire-map .formulaire input {
  height: 40px;
}
section.contactez-nous .formulaire-map .formulaire input[type=submit] {
  display: none;
}
section.contactez-nous .formulaire-map .formulaire textarea {
  height: 100px;
  line-height: 24px !important;
  padding: 9px 24px
  margin-bottom: 24px;
  border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
}
section.contactez-nous .formulaire-map .formulaire .submit {
  width: 164px;
  height: 50px;
  line-height: 50px;
  margin-top: 24px;
  text-align: center;
  color: var(--couleur-noir);
  background-color: var(--couleur-boutons);
  box-shadow: var(--box-shadow) var(--couleur-secondaire);
  border-radius: var(--border-radius);
  transition: var(--transition);
  text-align: center;
}
section.contactez-nous .formulaire-map .formulaire .submit p,
section.contactez-nous .formulaire-map .formulaire .submit svg {
  margin: 0;
  vertical-align: middle;
  display: inline-block;
}
section.contactez-nous .formulaire-map .formulaire .submit:hover {
  box-shadow: none;
}
section.contactez-nous .formulaire-map .map {
  height: 100%;
  width: -moz-max-content;
  width: max-content;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  overflow: hidden;
}

#scrollToTopButton {
  position: sticky;
  width: 42px;
  height: 42px;
  bottom: 128px;
  margin: 36px 16px 56px 16px;
  left: calc(100% - 16px);
  background: var(--couleur-boutons);
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 4px 0 var(--couleur-noir);
  overflow: hidden;
  color: var(--couleur-noir);
  transition: var(--transition);
}

#scrollToTopButton:hover {
  background-color: #f5dec7;
  box-shadow: 0 4px 4px 0 var(--couleur-boutons);
}

footer .listes {
  margin-bottom: 32px;
}
footer .listes div.liens-utiles {
  width: max(250px, 37.5%);
}
footer .listes div.plan-site {
  width: max(300px, 25%);
}
footer .listes div.horaires-ouverture {
  width: clamp(300px, 100%, 360px);
}
footer .listes h4 {
  font-size: var(--police-tres-grande);
}
footer .listes h4.mairie_ferme {
  margin: 1.33em 0 12px 0;
}
footer .listes p.mairie_ferme {
  margin: 12px 0 42px 0;
  color: #A94703;
}
footer .listes ul {
  width: 100%;
}
footer .listes li {
  height: -moz-fit-content;
  height: fit-content;
  line-height: 24px;
  margin-bottom: 12px;
  transition: var(--transition);
}
footer .listes a {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 5px 0;
  color: var(--couleur-noir);
}
footer .listes a svg {
  stroke: var(--couleur-noir);
}
footer .listes div.plan-site li.actif a,
footer .listes div.horaires-ouverture li.aujourdhui,
footer .listes div.horaires-ouverture li.today {
  font-weight: 600;
}
footer .listes div.liens-utiles li:hover a,
footer .listes div.plan-site li:hover a,
footer .listes div.plan-site li.actif a,
footer .listes div.horaires-ouverture li.aujourdhui,
footer .listes div.horaires-ouverture li.today {
  color: #A94703;
}
footer div.derniere-partie {
  width: 100%;
  height: 80px;
  align-items: center;
  text-align: center;
  font-size: var(--police-sup);
  background-color: var(--couleur-boutons);
}
footer div.derniere-partie a {
  color: var(--couleur-noir);
  transition: var(--transition);
  align-items: center;
  -webkit-text-decoration: underline transparent;
          text-decoration: underline transparent;
}
footer div.derniere-partie a p.credit,
footer div.derniere-partie a p.credit span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
footer div.derniere-partie a p.credit span {
  -webkit-text-decoration: underline transparent;
          text-decoration: underline transparent;
  transition: var(--transition);
}
footer div.derniere-partie a:hover p.credit span {
  text-decoration: underline;
}
footer svg {
  width: 24px;
  height: 24px;
  stroke: var(--couleur-noir);
}

.sommaire {
  background-color: var(--couleur-principale);
  margin: 75px 0;
  padding: 50px 0;
}

ol.liste-sommaire {
  padding: 0;
  margin-left: 56px;
}

ol.liste-sommaire li {
  padding-left: 6px;
  line-height: 25px;
  margin: 6px 0;
}

section.associations,
section.lieux-tourisme {
  padding-bottom: 65px;
}

section.section {
  padding: 32px 0;
}

section.lieux-tourisme .lieu-tourisme,
section.commerces_artisans div.commerce_artisanat {
  padding-top: 64px;
  scroll-margin-top: -32px;
}

section.lieux-tourisme:last-child,
section.commerces_artisans:last-child {
  padding-bottom: 128px;
}

section.lieux-tourisme .lieu-tourisme .image,
section.commerces_artisans div.commerce_artisanat .image {
  width: 490px;
  height: 250px;
  border-radius: var(--border-radius);
  background-color: var(--couleur-secondaire);
  overflow: hidden;
}
section.lieux-tourisme .lieu-tourisme .image img,
section.commerces_artisans div.commerce_artisanat .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

section.lieux-tourisme .lieu-tourisme .description,
section.commerces_artisans div.commerce_artisanat .description {
  width: 478px;
  height: 250px;
  margin-left: 32px;
  text-align: center;
}
section.lieux-tourisme .lieu-tourisme .description h4.nom-lieu,
section.lieux-tourisme .lieu-tourisme .description h4.nom-commerce_artisanat,
section.commerces_artisans div.commerce_artisanat .description h4.nom-lieu,
section.commerces_artisans div.commerce_artisanat .description h4.nom-commerce_artisanat {
  font-size: var(--police-grande);
  height: 58px;
  vertical-align: middle;
  margin: 0;
}
section.lieux-tourisme .lieu-tourisme .description p.sous-titre-asso,
section.commerces_artisans div.commerce_artisanat .description p.sous-titre-asso {
  margin: 12px 0 24px 0;
  font-size: var(--police-normal);
}
section.lieux-tourisme .lieu-tourisme .description p.resume,
section.commerces_artisans div.commerce_artisanat .description p.resume {
  line-height: 20px;
  margin-bottom: 25px;
}
section.lieux-tourisme .lieu-tourisme .description p.description,
section.commerces_artisans div.commerce_artisanat .description p.description {
  height: 100px;
  font-size: var(--police-normal);
}

section.commerces_artisans div.commerce_artisanat .description {
  margin-left: 0;
}

section.associations {
  gap: 48px 32px;
}
section.associations ul.liste_associations {
  width: 100%;
}
section.associations ul.liste_associations li.association {
  width: clamp(320px, 50% - 16px, 600px);
  height: -moz-fit-content;
  height: fit-content;
  align-items: center;
  margin-bottom: 72px;
  padding: 0;
  font-size: var(--police-normal);
}
section.associations ul.liste_associations li.association h4.nom-association {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 56px;
  line-height: 36px;
  padding: 10px 0;
  margin: 0;
  font-size: var(--police-grande);
}
section.associations ul.liste_associations li.association p.sous-titre-asso {
  width: 100%;
  margin: 12px 0 18px 0;
  font-size: var(--police-normal);
}
section.associations ul.liste_associations li.association p.resume {
  width: calc(100% - 26px);
  line-height: 20px;
  margin: 12px 0;
  border-left: 2px solid var(--couleur-ternaire);
  padding: 12px 0 12px 24px;
}

section.section h4 {
  margin: 48px 0 24px 0;
}

section.section :nth-child(3) {
  margin: 12px 0 24px 0;
}

section.section p {
  margin: 32px 0;
}

section.section a {
  text-decoration: underline;
  color: var(--couleur-boutons);
  transition: var(--transition);
}

section.section a:hover {
  color: var(--couleur-noir);
}

section.section .listing {
  margin-bottom: 6px;
}

section.sommaire ol.liste-sommaire ul,
section.section ul {
  list-style-type: disc;
  margin-left: 48px;
}

.info-importante span {
  margin-left: 48px;
  padding: 10px 24px;
  line-height: 20px;
  background-color: #f5dec7;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow) var(--couleur-boutons);
}
.info-importante span a {
  color: var(--couleur-noir);
}
.info-importante span a:hover {
  -webkit-text-decoration: underline dashed;
          text-decoration: underline dashed;
}

.acompleter span {
  color: var(--couleur-boutons);
  font-weight: 800;
}

main section.derniere_realisation {
  background-color: var(--couleur-principale);
  padding: 128px 0;
}
main section.derniere_realisation div.infos_realisation div.projet {
  position: relative;
  width: 300px;
  height: 300px;
  margin-bottom: 36px;
  border-radius: var(--border-radius);
  background-color: var(--couleur-ternaire);
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
main section.derniere_realisation div.infos_realisation div.projet img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
main section.derniere_realisation div.infos_realisation div.projet p {
  margin: 238px 0 12px 0;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}
main section.derniere_realisation div.infos_realisation div.infos {
  width: calc(100% - 400px);
  font-size: 20px;
}
main section.derniere_realisation div.infos_realisation div.infos span {
  font-size: 16px;
  color: var(--couleur-secondaire);
}
main section.derniere_realisation div.infos_realisation div.infos p {
  font-size: 16px;
  margin-bottom: 32px;
}
main section.derniere_realisation div.infos_realisation div.infos a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

main section.projets_eleves {
  padding: 128px 0;
  background-color: #f5f5f5;
}
main section.projets_eleves p {
  line-height: 130%;
}
main section.projets_eleves ul.liste_projets_eleves {
  width: 100%;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}
main section.projets_eleves ul.liste_projets_eleves li.projet {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 calc((100% - 936px) / 4) 36px calc((100% - 936px) / 4);
  border-radius: var(--border-radius);
  background-color: var(--couleur-ternaire);
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
main section.projets_eleves ul.liste_projets_eleves li.projet img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  -o-object-fit: cover;
     object-fit: cover;
  transition: var(--transition);
}
main section.projets_eleves ul.liste_projets_eleves li.projet p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  line-height: 50px;
  padding: 12px 0;
  margin: 0;
  text-align: center;
  font-size: 20px;
  background: rgba(235, 235, 235, 0.9);
  z-index: 25;
}
main section.projets_eleves ul.liste_projets_eleves li.projet:hover img {
  transform: scale(1.2);
}

main section.realisations_eleves {
  padding: 128px 0;
}
main section.realisations_eleves ul.liste_realisations_eleves {
  width: 100%;
  scroll-margin-top: 224px;
  gap: 50px calc((100% - 900px) / 2);
  flex-wrap: wrap;
}
main section.realisations_eleves ul.liste_realisations_eleves li.realisation {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 50%;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 50%;
}
main section.realisations_eleves ul.liste_realisations_eleves li.realisation div.image {
  min-width: 128px;
  width: 300px;
  max-width: 100%;
  min-height: 128px;
  height: 300px;
  max-height: 100%;
  background-color: #d3d3d3;
}
main section.realisations_eleves ul.liste_realisations_eleves li.realisation div.image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
main section.realisations_eleves ul.liste_realisations_eleves li.realisation p {
  width: auto;
  line-height: 56px;
  margin: 0;
  font-size: 20px;
  text-align: center;
}

main section.rpi {
  padding: 128px 0;
}
main section.rpi p {
  line-height: 130%;
}
main section.rpi ul.liste_ecoles {
  width: 100%;
  margin-top: 64px;
}
main section.rpi ul.liste_ecoles li.ecole h4 {
  text-align: center;
  font-size: 20px;
  font-weight: 200;
  margin: 0 0 12px 0;
  color: var(--couleur-secondaire);
}
main section.rpi ul.liste_ecoles li.ecole div.box {
  width: 238px;
  height: 160px;
  border-radius: var(--border-radius);
  box-shadow: 0px 4px 10px 2px #717171;
  background-color: #f5f5f5;
}
main section.rpi ul.liste_ecoles li.ecole div.box p {
  text-align: center;
  margin: 12px 0;
}
main section.rpi div.boutons {
  margin: 64px 0;
}
main section.rpi div.boutons a {
  margin: 0 24px 16px 0;
}
main section.rpi div.boutons a div.btn.btn-principal {
  padding: 0 32px;
}

main section.ecole_yviers {
  padding: 128px 0;
  background-color: #f5f5f5;
}
main section.ecole_yviers div.wrapper div.display-flex {
  margin-bottom: 32px;
}
main section.ecole_yviers div.wrapper div.display-flex a {
  margin-left: 32px;
}
main section.ecole_yviers div.wrapper p.infos {
  margin-bottom: 64px;
}
main section.ecole_yviers div.wrapper ul.liste_infos {
  width: 100%;
  margin-top: 64px;
  gap: 56px;
}
main section.ecole_yviers div.wrapper ul.liste_infos li.info {
  width: -moz-fit-content;
  width: fit-content;
}
main section.ecole_yviers div.wrapper ul.liste_infos li.info h4 {
  text-align: center;
  font-size: 20px;
  font-weight: 200;
  margin: 0 0 12px 0;
  color: var(--couleur-secondaire);
}
main section.ecole_yviers div.wrapper ul.liste_infos li.info div.box {
  width: -moz-fit-content;
  width: fit-content;
  min-width: 320px;
  height: 160px;
  padding: 0 16px;
  border-radius: var(--border-radius);
  box-shadow: 0px 4px 10px 2px #717171;
  background-color: #f5f5f5;
}
main section.ecole_yviers div.wrapper ul.liste_infos li.info div.box p {
  text-align: center;
  margin: 12px 0;
}

section.services {
  padding: 128px 0;
}
section.services form input[type=search] {
  display: inline-block;
  width: calc(100% - 64px);
  height: 56px;
  padding: 0 32px;
  border: none;
  color: var(--couleur-noir);
  border-radius: 20px;
  transition: var(--transition);
  box-shadow: 0px 4px 10px 2px #717171;
}
section.services form input[type=search]:focus {
  outline: 1px solid var(--couleur-noir);
}
section.services p.reponse {
  font-size: 1rem;
}
section.services p.reponse::before {
  content: "⮞";
  margin-right: 12px;
}
section.services table {
  display: block;
  width: 100%;
  margin-top: 80px;
  border-collapse: collapse;
}
section.services table thead,
section.services table tbody {
  display: inline-block;
  width: 100%;
}
section.services table thead tr,
section.services table tbody tr {
  padding: 0 12px;
}
section.services table thead th,
section.services table thead td,
section.services table tbody th,
section.services table tbody td {
  text-align: start;
}
section.services table thead td span,
section.services table tbody td span {
  display: none;
}
section.services table thead th:nth-child(1),
section.services table thead td:nth-child(1),
section.services table tbody th:nth-child(1),
section.services table tbody td:nth-child(1) {
  display: table-cell;
  width: clamp(128px, 16vw, 160px);
  padding-left: 16px;
}
section.services table thead th:nth-child(2),
section.services table thead td:nth-child(2),
section.services table tbody th:nth-child(2),
section.services table tbody td:nth-child(2) {
  display: table-cell;
  width: clamp(256px, 24vw, 384px);
}
section.services table thead th:nth-child(3),
section.services table thead td:nth-child(3),
section.services table tbody th:nth-child(3),
section.services table tbody td:nth-child(3) {
  display: table-cell;
  width: clamp(256px, 24vw, 384px);
  padding: 16px;
}
section.services table thead th:nth-child(4),
section.services table thead td:nth-child(4),
section.services table tbody th:nth-child(4),
section.services table tbody td:nth-child(4) {
  display: table-cell;
  width: clamp(128px, 16vw, 160px);
  padding-right: 16px;
  text-align: center;
}
section.services table thead th:nth-child(4),
section.services table tbody th:nth-child(4) {
  padding: 0 6px 0 0;
  text-align: center;
}
section.services table thead tr th {
  height: 72px;
  font-size: 20px;
  font-weight: 200;
  color: #8f8f8f;
  border-bottom: 3px solid #8f8f8f;
}
section.services table tbody tr td {
  padding: 12px 0;
  border-bottom: 1px solid #8f8f8f;
}

section.histoire p {
  line-height: 130%;
}

section.lien_fichiers_commune {
  padding: 128px 0;
}
section.lien_fichiers_commune ul {
  width: 100%;
}
section.lien_fichiers_commune ul li {
  margin-bottom: 32px;
}

section.location_salle {
  padding: 0 0 128px 0;
}
section.location_salle div.box {
  gap: 32px;
}
section.location_salle div.box div.box_gauche {
  width: clamp(320px, 60% - 16px, 600px);
  height: auto;
}
section.location_salle div.box div.box_gauche img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
}
section.location_salle div.box div.box_droite {
  width: clamp(320px, 40% - 16px, 400px);
  line-height: 130%;
}
section.location_salle div.box div.box_droite a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 36px;
}

section.elus_municipaux {
  padding: 0;
}
section.elus_municipaux ul.liste_municipalite {
  width: 100%;
}
section.elus_municipaux ul.liste_municipalite li.personne {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 50%;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 50%;
  margin: 0 calc((100% - 900px) / 2) 32px 0;
}
section.elus_municipaux ul.liste_municipalite li.personne div.image {
  min-width: 128px;
  width: 300px;
  max-width: 100%;
  min-height: 128px;
  height: 300px;
  max-height: 100%;
  background-color: #d3d3d3;
}
section.elus_municipaux ul.liste_municipalite li.personne div.image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: saturate(1.2);
}
section.elus_municipaux ul.liste_municipalite li.personne h4 {
  width: 300px;
  line-height: 36px;
  margin: 0;
  font-size: 24px;
  text-align: center;
}
section.elus_municipaux ul.liste_municipalite li.personne p {
  width: 300px;
  line-height: 36px;
  margin: 0;
  font-size: 16px;
  text-align: center;
}
section.elus_municipaux ul.liste_municipalite li.personne:nth-child(3n) {
  margin-right: 0;
}

section.projets_section {
  padding: 128px 0;
  background-color: #fffcfb;
}
section.projets_section ul.liste_projets_budget {
  gap: 30px;
  width: 100%;
}
section.projets_section ul.liste_projets_budget li.projets {
  position: relative;
}
section.projets_section ul.liste_projets_budget li.projets > div.display-flex {
  align-items: center;
  height: -moz-fit-content;
  height: fit-content;
}
section.projets_section ul.liste_projets_budget li.projets div.rectangle_gauche {
  display: block;
  width: 10px;
  height: 128px;
  border-radius: 6px 0 0 6px;
  background-color: #f5dec7;
  position: relative;
}
section.projets_section ul.liste_projets_budget li.projets div.rectangle_gauche::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 128px;
  z-index: 15;
  top: 50%;
  right: 0;
  transform: translate(100%, -50%);
  background-color: #f5dec7;
}
section.projets_section ul.liste_projets_budget li.projets div.box {
  z-index: 20;
  width: calc(100% - 24px);
  padding: 32px;
  box-sizing: border-box;
  border-radius: 12px;
  background-color: #fff7ed;
}
section.projets_section ul.liste_projets_budget li.projets div.box h4 {
  margin: 0 0 24px 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--couleur-noir);
}
section.projets_section ul.liste_projets_budget li.projets div.box p {
  margin: 0;
}
section.projets_section ul.liste_projets_budget li.projets div.rectangle_droite {
  display: block;
  width: 10px;
  height: 128px;
  border-radius: 0 6px 6px 0;
  background-color: #f5dec7;
  position: relative;
}
section.projets_section ul.liste_projets_budget li.projets div.rectangle_droite::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 128px;
  z-index: 15;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);
  background-color: #f5dec7;
}
section.projets_section ul.liste_projets_budget li.projets a {
  display: block;
  width: -moz-max-content;
  width: max-content;
  height: -moz-fit-content;
  height: fit-content;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 64%);
  z-index: 99;
}
section.projets_section ul.liste_projets_budget li.projets.lien {
  margin-bottom: 32px;
}

section.erreur404 {
  width: 100%;
  height: calc(100vh - 177.5px);
  margin: 160px 0 0 0;
  text-align: center;
  position: relative;
}

section.erreur404 h2 {
  font-size: 32px;
  margin: 0 0 24px 0;
  padding-top: 64px;
}

section.erreur404 p {
  font-size: 20px;
  margin: 0 0 64px 0;
}

section.erreur404 h2,
section.erreur404 p {
  width: 60vw;
  transform: translateX(65%);
}

section.erreur404 a > button {
  width: 60vw;
  transform: translateX(20vw);
}

section.erreur404 img {
  position: absolute;
  left: 0;
  top: 0;
  width: 40vw;
  border-radius: 0 24px 24px 0;
}

/*=============================================
    Responsive design
=============================================*/
/* Entre 768px et 1080px */
@media screen and (max-width: 1080px) {
  header {
    position: relative;
  }
  header nav.menu.menu-principal {
    flex-direction: column;
    align-items: center;
  }
  header nav.menu.menu-principal ul.liste-liens {
    width: 90%;
    flex-wrap: wrap;
  }
  header nav.menu.menu-principal ul.liste-liens li.item {
    margin: auto 12px;
  }
  div.titre-recherche {
    margin-top: 0;
  }
  section.events-bulletins > div {
    flex-direction: column;
    align-items: center;
  }
  section.events-bulletins > div .evenements {
    margin-bottom: 128px;
  }
  section.habitants .liste-domaines {
    justify-content: space-evenly;
  }
  section.habitants .liste-domaines div {
    margin-bottom: 32px;
  }
  section.contactez-nous .formulaire-map {
    width: 100%;
    flex-direction: column;
    border-radius: 0;
  }
  section.contactez-nous .formulaire-map .formulaire {
    width: calc(100% - 96px);
  }
  section.contactez-nous .formulaire-map .formulaire input,
  section.contactez-nous .formulaire-map .formulaire textarea {
    border-radius: 0;
  }
  section.contactez-nous .formulaire-map .map {
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
  }
  section.contactez-nous .formulaire-map .map iframe {
    width: 100%;
  }
  section.associations .association,
  section.lieux-tourisme .lieu-tourisme,
  section.commerces_artisans div.commerce_artisanat {
    flex-direction: column;
    align-items: center;
    margin-bottom: 72px;
    padding: 0;
  }
  section.associations .association .image,
  section.lieux-tourisme .lieu-tourisme .image,
  section.commerces_artisans div.commerce_artisanat .image {
    width: 320px;
    height: 163px;
    margin: 0;
  }
  section.associations .association .description,
  section.lieux-tourisme .lieu-tourisme .description,
  section.commerces_artisans div.commerce_artisanat .description {
    width: 320px;
    height: -moz-min-content;
    height: min-content;
    margin: 0;
  }
  section.associations .association .description h4.nom-association,
  section.associations .association .description h4.nom-lieu,
  section.associations .association .description h4.nom-commerce_artisanat,
  section.lieux-tourisme .lieu-tourisme .description h4.nom-association,
  section.lieux-tourisme .lieu-tourisme .description h4.nom-lieu,
  section.lieux-tourisme .lieu-tourisme .description h4.nom-commerce_artisanat,
  section.commerces_artisans div.commerce_artisanat .description h4.nom-association,
  section.commerces_artisans div.commerce_artisanat .description h4.nom-lieu,
  section.commerces_artisans div.commerce_artisanat .description h4.nom-commerce_artisanat {
    height: -moz-fit-content;
    height: fit-content;
    margin-top: 12px;
  }
  section.lieux-tourisme,
  section.commerces_artisans {
    margin-bottom: 0;
  }
  section.lieux-tourisme .lieu-tourisme p.description,
  section.commerces_artisans .lieu-tourisme p.description {
    margin-bottom: 48px;
  }
  section.lieux-tourisme div.commerce_artisanat p.description,
  section.commerces_artisans div.commerce_artisanat p.description {
    margin-bottom: 24px;
  }
  section.erreur404 h2 {
    font-size: 28px;
  }
  section.erreur404 p {
    font-size: 18px;
  }
  section.erreur404 h2,
  section.erreur404 p,
  section.erreur404 a > button {
    width: 100vw;
    transform: none;
  }
  section.erreur404 a {
    display: block;
    margin-bottom: 64px;
  }
  section.erreur404 img {
    position: relative;
    width: max(320px, 50vw);
    height: auto;
    margin: auto;
    border-radius: 24px;
  }
  section.elus_municipaux ul.liste_municipalite {
    justify-content: center;
    gap: 24px;
  }
  section.elus_municipaux ul.liste_municipalite li.personne {
    margin: 0;
  }
  main section.projets_eleves ul.liste_projets_eleves {
    justify-content: space-around;
    flex-wrap: wrap;
  }
  main section.projets_eleves ul.liste_projets_eleves li.projet {
    margin: 0 0 16px 0;
  }
  main section.ecole_yviers div.wrapper div.display-flex {
    flex-direction: column;
  }
  main section.ecole_yviers div.wrapper div.display-flex a {
    margin-left: 0;
  }
  main section.ecole_yviers div.wrapper ul.liste_infos {
    justify-content: space-around;
  }
  main section.ecole_yviers div.wrapper ul.liste_infos li.info h4 {
    width: 100%;
  }
  main section.ecole_yviers div.wrapper ul.liste_infos li.info div.box {
    padding: 0 16px;
  }
  main section.rpi ul.liste_ecoles {
    justify-content: space-around;
  }
  main section.rpi ul.liste_ecoles li.ecole {
    margin-bottom: 32px;
  }
}
/* Plus petit que 768px */
@media screen and (max-width: 768px) {
  .actus-events .actualites,
  .actus-events .evenements {
    width: auto;
  }
  section.prochain_event div.events article.event-principal.display-flex.espace-max {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  section.prochain_event div.events article.event-principal.display-flex.espace-max div.date {
    margin-left: 32px;
  }
  section.prochain_event div.events article.event-principal.display-flex.espace-max div.dates {
    transform: translateX(-22%);
  }
  section.prochain_event div.events article.event-principal.display-flex.espace-max div.contenu {
    width: calc(100% - 32px);
    padding: 0 16px;
  }
  section.prochain_event div.events article.event-principal.display-flex.espace-max div.contenu *:last-child {
    margin: auto;
  }
  section.section p.info-importante span {
    display: block;
    margin: 6px auto;
  }
  .derniere-partie {
    flex-direction: column;
  }
  section.services table thead th:nth-child(3),
  section.services table thead td:nth-child(3),
  section.services table tbody th:nth-child(3),
  section.services table tbody td:nth-child(3) {
    display: none;
  }
  section.erreur404 {
    margin: 48px 0 25.5px 0;
  }
}
/* Plus petit que 480px */
@media screen and (max-width: 480px) {
  header {
    position: fixed;
  }
  header nav.menu.menu.menu-principal {
    flex-direction: row;
  }
  header nav.menu.menu.menu-principal ul.liste-liens:not(.actif) {
    display: none;
  }
  header nav.menu.menu.menu-principal ul.liste-liens.actif {
    position: absolute;
    top: 60px;
    display: block;
    right: 0;
    z-index: 90;
    background-color: var(--couleur-blanc);
    opacity: 0.95;
    text-align: center;
  }
  header svg.menu-burger {
    display: block;
    width: 40px;
    height: 40px;
    margin: 10px 22px;
  }
  .titre-recherche div.image img {
    height: 100%;
    width: auto;
    -o-object-position: center 0;
       object-position: center 0;
  }
  section.events-bulletins .evenements .bouton-tout p,
  section.habitants .bouton-tout p {
    margin: 38px 0 20px 0;
  }
  section.events-bulletins .evenements article.event-principal {
    flex-direction: column;
    width: 300px;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto;
    border-radius: 0;
  }
  section.events-bulletins .evenements article.event-principal .image {
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 0;
  }
  section.events-bulletins .evenements article.event-principal .image img {
    width: 100%;
    height: 100%;
  }
  section.events-bulletins .evenements article.event-principal div.date {
    margin: 12px auto;
  }
  section.events-bulletins .evenements article.event-principal .description {
    width: calc(100% - 24px);
  }
  section.events-bulletins .evenements article.event-principal .contenu {
    text-align: center;
  }
  section.events-bulletins .evenements article.event-principal .contenu p.lieu,
  section.events-bulletins .evenements article.event-principal .contenu p.horaires {
    display: flex;
    align-content: center;
  }
  section.events-bulletins .evenements article.event-principal .contenu div.bouton-savoirplus {
    margin: auto auto 24px auto;
  }
  main section.ecole_yviers div.wrapper ul.liste_infos li.info div.box {
    width: 288px;
    min-width: 288px;
  }
  section.contactez-nous {
    flex-direction: column;
  }
  section.contactez-nous h3 {
    margin: 18px auto;
  }
  section.contactez-nous .formulaire-map .formulaire {
    padding: 32px 24px;
    width: calc(100% - 48px);
  }
  section.contact .liste .telephone,
  section.contact .liste .email,
  section.contact .liste .adresse {
    margin: 24px 0;
  }
  section.contact .liste .telephone .encadrement,
  section.contact .liste .email .encadrement,
  section.contact .liste .adresse .encadrement {
    width: 100%;
  }
  section.services table thead tr {
    display: table;
    width: 100%;
  }
  section.services table thead th:nth-child(1),
  section.services table thead td:nth-child(1),
  section.services table tbody th:nth-child(1),
  section.services table tbody td:nth-child(1) {
    display: none;
  }
  section.services table tbody th:nth-child(2),
  section.services table tbody td:nth-child(2) {
    width: calc(100% - 64px);
  }
  section.services table thead th,
  section.services table thead td,
  section.services table tbody th,
  section.services table tbody td {
    padding: 12px 0 !important;
  }
  section.services table tbody td span {
    display: block;
  }
  section.elus_municipaux ul.liste_municipalite li.personne {
    max-width: 300px;
  }
  section.erreur404 {
    margin-top: 60px;
  }
  section.erreur404 h2 {
    font-size: 24px;
  }
  section.erreur404 p {
    font-size: 16px;
  }
  section.erreur404 img {
    border-radius: 0;
  }
  footer .listes div.liens-utiles,
  footer .listes div.plan-site,
  footer .listes div.horaires-ouverture {
    width: clamp(300px, 100%, 360px);
  }
}
/*=============================================================
  Modules
=============================================================*/
.display-flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
  justify-content: space-around;
}

.flex-vertical {
  flex-direction: column;
}

.espace-lineaire {
  justify-content: space-evenly;
}

.espace-uniforme {
  justify-content: space-around;
}

.espace-max {
  justify-content: space-between;
}

.espace-centre {
  justify-content: center;
}

.espace-droite {
  justify-content: right;
}

.espace-gauche {
  justify-content: left;
}/*# sourceMappingURL=style.css.map */