/* --- FEUILLE DE STYLE --- */

/* ////////////////////////////////////////////////////////////////////////////

	Saint-Contest // CSS
	NetConception 2021
	
//////////////////////////////////////////////////////////////////////////// */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: inherit;
}

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  color: #7F7D7C;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;

  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */

  -moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-webkit-box-sizing:border-box;
  box-sizing:border-box;
	font-size: 62.5%; /* R�-�quilibrage du Rem face au Pixel pour des calculs simples / 1.0rem = 10px */
  font-weight: 300;
  font-family: 'Signika', sans-serif;
}

body {
  background: #FFFFFF;
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Attention les fonctions JS scroll ne marcheront pas avec overflow-x: hidden; */
  /*overflow-x: hidden;*/
  font-size: 1.8rem;
  font-size: clamp(1.4rem, 1.1vw, 1.8rem);
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #008D9C;
  color: #FFF;
  text-shadow: none;
}

::selection {
  background: #008D9C;
  color: #FFF;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

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

/* ==========================================================================
   Normalize
   ========================================================================== */

img {
	max-width: 100%;
}

main {
  display: block;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
  outline: none;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

.alignleft {
	float: left;
	margin: 0 40px 20px 0;
}
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignright {
	float: right;
	margin: 0 0 20px 40px;
}

@supports (object-fit: cover) {
  /* IF object-fit IS SUPPORTED */
  .object-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

.ratio-box {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.ratio-box > img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
}

.ratio-16-9 {
  padding-bottom: 56.25%;
}

.ratio-1-1 {
  padding-bottom: 100%;
} 

.container {
	width: 1200px;
	margin: auto;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*-------------- HEADER */

/*
header.layout {
  
}
*/

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  background-color: #FFF;
  padding: 0 20px;
}

.branding {
  display: block;
  padding: 10px 0;
}

.branding img {
  width: 210px;
}

/*-------------- NAVIGATION */

.button-menu-resp {
  position: relative;
  top: unset;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.button-menu-resp:hover {
  opacity: 0.6;
}

.button-menu-resp span {
  font-weight: 300;
  color: #333333;
  margin-right: 6px;
}

.hc-nav-trigger span,
.hc-nav-trigger span::before,
.hc-nav-trigger span::after {
  background-color: #008D9C;
  border-radius: 1px;
}

.hc-offcanvas-nav {
  font-family: inherit;
}

@media (min-width: 1025px) {
	

  .main-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    height: 100%;
  }

  .main-nav__item {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 20px;
  }

  .main-nav__list > * + *:before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    bottom: 0;
    display: block;
    width: 2px;
    height: 10px;
    margin: auto;
    background-color: #EF7900;
  }

  .main-nav__link {
    text-decoration: none;
    color: #7F7D7C;
    font-size: 2.0rem;
    font-size: clamp(1.6rem, 1.1vw, 2.0rem);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .main-nav__link:hover,
  .main-nav__item:hover .main-nav__link,
  .main-nav__item.is-active .main-nav__link {
    color: #C0CA00;
  }
  

  .main-nav__link:first-child:nth-last-child(2):after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 6px;
    margin: 0 0 4px 5px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.71655.232035C8.85799.0833867 9.04899 0 9.24803 0c.19905 0 .39004.0833867.53148.232035.06984.072994.12529.160002.16314.25596C9.98051.583952 10 .686942 10 .790971c0 .10403-.01949.20702-.05735.302979-.03785.09596-.0933.18296-.16314.25596L5.53202 5.76833C5.39026 5.91677 5.19913 6 5 6c-.19914 0-.39026-.08323-.53202-.23167L.220486 1.34991c-.069832-.073-.1252873-.16-.16314-.25596C.0194934.997991 0 .895001 0 .790971 0 .686942.0194934.583952.057346.487995.0951987.392037.150654.305029.220486.232035.361925.0833867.552923 0 .751966 0c.199042 0 .390044.0833867.531484.232035L5.00163 3.8556 8.71655.232035z' fill='%237F7D7C'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: all 0.2s ease;
  }

  .main-nav__link:hover:first-child:nth-last-child(2):after,
  .main-nav__item:hover .main-nav__link:first-child:nth-last-child(2):after,
  .main-nav__item.is-active .main-nav__link:first-child:nth-last-child(2):after  {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.71655.232035C8.85799.0833867 9.04899 0 9.24803 0c.19905 0 .39004.0833867.53148.232035.06984.072994.12529.160002.16314.25596C9.98051.583952 10 .686942 10 .790971c0 .10403-.01949.20702-.05735.302979-.03785.09596-.0933.18296-.16314.25596L5.53202 5.76833C5.39026 5.91677 5.19913 6 5 6c-.19914 0-.39026-.08323-.53202-.23167L.220486 1.34991c-.069832-.073-.1252873-.16-.16314-.25596C.0194934.997991 0 .895001 0 .790971 0 .686942.0194934.583952.057346.487995.0951987.392037.150654.305029.220486.232035.361925.0833867.552923 0 .751966 0c.199042 0 .390044.0833867.531484.232035L5.00163 3.8556 8.71655.232035z' fill='%23C0CA00'/%3E%3C/svg%3E");
  }

  .main-lvl2-nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: calc(100% - 20px);
    left: 0;
    width: 250px;
    background-color: #FFF;
    border-top: 2px solid #C0CA00;
    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: all 0.2s ease;
  }
/** /
  .main-nav__item:nth-last-child(1) .main-lvl2-nav__list,
  .main-nav__item:nth-last-child(2) .main-lvl2-nav__list,
  .main-nav__item:nth-last-child(3) .main-lvl2-nav__list,
  .main-nav__item:nth-last-child(4) .main-lvl2-nav__list,/**/
  .main-nav__item:nth-last-child(1) .main-lvl2-nav__list {
    left: unset;
    right: 0;
  }

  .main-lvl2-nav__item {
    display: block; 
  }

  .main-lvl2-nav__link {
    display: block;
    color: #7F7D7C;
    font-size: 1.6rem;
    /* clamp(MIN, VAL, MAX) */
    font-size: clamp(1.4rem, 1.1vw, 1.6rem);
    padding: 10px;
    border-radius: 4px;
	background-color: #f4f4f4;
    border-bottom: 2px solid #E5E5E5;
	font-weight:600;
  }

  .main-lvl2-nav__link:hover {
    background-color: #E5E5E5;
  }

  .main-nav__item:hover .main-lvl2-nav__list {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  /**/
  .main-lvl2-nav__item.is-active  {
    background-color: #E5E5E5;
  } /**/ 
  .main-lvl2-nav__item.is-active .main-lvl2-nav__link{
	color: #008D9C;
  }
  
  
  .main-lvl3-nav__list {
    list-style: none;
    padding: 0;    
    width: 250px;
    background-color: #FFF;
    /*border-top: 2px solid #C0CA00;* /
    -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);    
    transition: all 0.2s ease;
	/**/
  }
  
  .main-lvl3-nav__link {
	  position:relative;
    display: block;
    color: #7F7D7C;
	font-weight:400;
    font-size: 1.5rem;
    /* clamp(MIN, VAL, MAX) */
    font-size: clamp(1.3rem, 1.0vw, 1.5rem);
    padding: 5px 5px 5px 15px;
    border-radius: 4px;
    border-bottom: 1px solid #E5E5E5;
	/*margin-left:10px;*/
  }
  
  

	.main-lvl3-nav__link::before {
	  position:absolute;
	  top:04px;
	  left:0px;
	  content: '-';
	  display: inline-block;
	  margin: 0 5px;
	}
	

}

/*--------------- HEADER BANDEAU */

.header-bandeau {
  position: relative;
  overflow: hidden;
  /* Le padding haut/bas g�re la hauteur du bandeau */
  padding-top: 5%;
  padding-top: clamp(40px, 5%, 100px);
  padding-bottom: 18%;
  padding-bottom: clamp(100px, 18%, 550px);
}

.header-bandeau:before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 10px;
  bottom: 0;
  display: block;
  width: 165px;
  height: 168px;
  background-image: url('../images/assets/arbres-contours.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.header-actions:before {
  content: '';
  position: absolute;
  z-index: 1;
  display: block;
  left: -160px;
  top: -20px;
  width: 200px;
  height: 200px;
  background-image: url('../images/label.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.header-bandeau:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-image: url('../images/assets/frise.svg');
  background-repeat: repeat-x;
  background-position: bottom;
}

.header-actions {
  position: relative;
  z-index: 1;
}

.header-bandeau .lSSlideOuter {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header-bandeau .lSSlideWrapper {
  width: 100%;
  height: 100%;
}

.header-bandeau .js-slider-fade {
  width: 100%!important;
  height: 100%!important;
  padding-bottom: 0!important;
}

.js-slider-fade {
  background-color: #333333;
}

.js-slider-fade picture {
  display: block;
  width: 100%;
  height: 100%;
}

.js-slider-fade picture img {
  width: 100%;
}

@supports (object-fit: cover) {
  /* IF object-fit IS SUPPORTED */
  .js-slider-fade picture img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

/*----------------- HEADER ACTIONS (SEARCH) */

.title-home {
  font-size: 3.0rem;
  /*font-size: clamp(2.0rem, 1.6vw, 3.0rem);*/
  font-size: clamp(2.6rem, 3.5vw, 4rem);
  color: #FFF;
  font-weight: 300;
  text-align: center;
  padding: 0;
  margin: 0 0 10px 0;
  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.750);
}

.title-home span:nth-child(1) {
  font-weight: 700;
}
.title-home span:nth-child(2) {
  font-weight: 700;
}

.header-actions {
  width: 100%;
  /*max-width: 590px;*/
  max-width: 800px;
  padding: 0 20px;
  margin: auto;
}
#formulaireRecherche {
  width: 100%;
  max-width: 590px;
  margin: auto;
}

.form-search {
  display: flex;
  align-items: center;
  min-height: 40px;
  height: 4vw;
  max-height: 40px;
  background-color: rgba(255,255,255,0.65);
  border-radius: 100px;
  padding: 2px;
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

@supports (backdrop-filter: blur(10px)) {
	/* IF backdrop-filter IS SUPPORTED */
	.form-search {
	  backdrop-filter: blur(20px);
    background-color: rgba(255,255,255,0.25);
	}
}

.form-search__input {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 1.8rem;
  font-weight: 300;
  color: #FFF;
  background-color: transparent;
  padding: 0 10px 0 18px;
}

.form-search__submit {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 100px;
  background-color: #FFF;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}

.form-search__submit:hover {
  opacity: 0.6;
}

.form-search__submit img {
  width: 18px;
}

.form-search ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #FFF;
  font-weight: 300;
  opacity: 1; /* Firefox */
  font-size: 1.8rem;
}
.form-search :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #FFF;
  font-weight: 300;
  opacity: 1;
  font-size: 1.8rem;
}
.form-search ::-ms-input-placeholder { /* Microsoft Edge */
  color: #FFF;
  font-weight: 300;
  opacity: 1;
  font-size: 1.8rem;
}

.suggestions__list {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 10px 0;
  flex-wrap: wrap;
}

.suggestions__item {
  margin: 5px;
}

.suggestions__link {
  display: inline-block;
  font-size: 1.4rem;
  font-weight: 600;
  color: #FFF;
  background-color: #C0CA00;
  padding: 5px 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.suggestions__link:hover {
  background-color: #EF7900;
  color: #FFF;
}

/*----------------- TOOLS SIDE */

.tools-side {
  position: fixed;
  z-index: 100;
  top: 130px;
  right: 0;
}

.tools-side ul {
  list-style: none;
  padding: 5px;
  margin: 10px 0;
  background-color: #008D9C;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.tools-side li+li::before {
  content: '';
  display: block;
  width: 10px;
  height: 2px;
  /*
  margin: 5px auto;
  background-color: #FFF;
  */
  margin: 2px auto;
}

.tools-side a,
.tools-side button {
  cursor: pointer;
  position: relative;
  display: block;
  border-radius: 100px;
  padding: 0;
  border: none;
  background-color: transparent;
}

.tools-side a:hover img,
.tools-side button:hover img {
  opacity: 0.7;
}

.tools-side img {
  width: 30px;
  transition: all 0.2s ease;
}

.tools-side .tooltip {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  left: -10px;
  white-space: nowrap;
  line-height: 1;
  padding: 4px 10px;
  margin: auto 0;
  color: #FFF;
  background-color:rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  transition: all 0.2s ease;

  opacity: 0;
  visibility: hidden;
  transform: translateX(-90%);
}

.tools-side a:hover .tooltip,
.tools-side button:hover .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-100%);
}

#uci_link {
  display: none;
}

/*----------------- ACCES RAPIDES */

.acces-rapides {
  position: relative;
  max-width: 1200px;
  margin: auto;
  clear:both;
}

header.layout .acces-rapides {
  position: relative;
  z-index: 1;
  margin-top: -40px;
}

.acces-rapides__list {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 0 5%;
  margin: 0;
}

.acces-rapides__item {
  flex: 1;
  margin: 0 20px;
}

.acces-rapides__link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acces-rapides__link .icon {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: #EF7900;
  border-radius: 100px;
  border: 2px solid #FFF;
  margin: 0 0 5px 0;
  transition: all 0.2s ease;
}

.acces-rapides__link:hover .icon {
  background-color: #C0CA00;
}

.acces-rapides__link .icon img {
  width: 55%;
}

.acces-rapides__link .label {
  text-transform: uppercase;
  color: #333333;
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.02em;
}

/*----------------- COLONNE ASIDE */

.col {
  flex: none;
  width: 400px;
}

/* The emerging W3C standard
that is currently Firefox-only */
.col {
  scrollbar-width: thin;
  scrollbar-color: #94C121 #F0F0F0;
}

/* Works on Chrome/Edge/Safari */
.col::-webkit-scrollbar {
  width: 6px;
  border-radius: 20px;
}
.col::-webkit-scrollbar-track{
  background: #F0F0F0;
}
.col::-webkit-scrollbar-thumb {
  background-color: #94C121;
  border-radius: 20px;
}


.col-wrapper {
  background-color: #FFF;
  border-radius: 4px;
  padding: 30px 15px;
}

.col > .col-wrapper + .col-wrapper {
  margin-top: 30px;
}

.col .colored-title {
  display: block;
  font-size: 2.0rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.6rem, 1.1vw, 2.0rem);
  padding: 0;
  margin: 0 0 15px 0;
}

.col-item {
  position: relative;
}

.col-wrapper > * + * {
  padding: 30px 0 0 0;
}

.col-wrapper > * + *::before {
  content: '';
  display: block;
  height: 2px;
  margin: 0 0 30px 0;
  background-image: repeating-linear-gradient(0deg, #FFDFB2, #FFDFB2 12px, transparent 12px, transparent 32px, #FFDFB2 32px), repeating-linear-gradient(90deg, #FFDFB2, #FFDFB2 12px, transparent 12px, transparent 32px, #FFDFB2 32px), repeating-linear-gradient(180deg, #FFDFB2, #FFDFB2 12px, transparent 12px, transparent 32px, #FFDFB2 32px), repeating-linear-gradient(270deg, #FFDFB2, #FFDFB2 12px, transparent 12px, transparent 32px, #FFDFB2 32px);
  background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
}

.btnlink-icon {
  display: flex;
}

.btnlink-icon:hover .icon {
  background-color: #FFA72F;
}

.btnlink-icon:hover .label {
  color: #FFA72F;
  border-color: #FFA72F;
  background-color: #FFF;
  
}

.btnlink-icon .icon {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFC97F;
  padding: 15px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  transition: all 0.2s ease;
}

.btnlink-icon .icon img {
  flex: none;
  min-width: 20px;
  min-height: 20px;
  width: 1.6vw;
  max-width: 30px;
  max-height: 30px;
}

.btnlink-icon .label {
  display: flex;
  flex: auto;
  align-items: center;
  color: #B06600;
  font-weight: 400;
  font-size: 1.8rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.4rem, 1.1vw, 1.8rem);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border: 1px solid transparent;
  background-color: #FFA72F;
  padding: 5px 10px;
  transition: all 0.2s ease;
}

.magazine-municipal {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 0;
}

.magazine-municipal > li {
  width: calc(50% - 7.5px);
}

.magazine-municipal__item {
  display: block;
}

.magazine-municipal__item img {
  display: block;
  width:100%;
  border-radius: 4px;
  border: 1px solid #C4C4C4;
  padding: 10px;
  transition: 0.2s ease all;
}
.magazine-municipal__item:hover img {
  border-color: #FFA72F;
}

.magazine-municipal__item .label {
  font-weight: 300;
  font-size: 1.6rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
  text-align: center;
  margin: 5px 0 0 0;
  color: #333333;
  transition: all 0.2s ease;
}
.magazine-municipal__item:hover .label {
  color:#FFA72F;
}

.magazine-municipal__item .label span:first-child {
  font-weight: 600;
}

.edito {
  text-align: justify;
  font-weight: 300;
  font-size: 1.6rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
}

.edito .see-more {
  display: block;
  text-align: right;
}

/*----------------- HOME */

.content {
  flex: 1 1 auto;
}

.title-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 40px 0 30px 0;
}

.title-bar h2 {
  color: #7F7D7C;
  display: flex;
  align-items: center;
  font-size: 3.0rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(2.0rem, 1.6vw, 3.0rem);
  font-weight: 600;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

.title-bar h2::after {
  content: '';
  display: inline-block;
  width: 100px;
  height: 2px;
  margin-left: 20px;
  background-color: #C4C4C4;
}

/*----------------- FIL D'ACTUALITE */

.article {
  position: relative;
  color: #333333;
  height: 100%;
  min-height: 420px;
}

.article__title {
  text-transform: uppercase;
  color: #94C121;
  font-size: 2.0rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.6rem, 1.1vw, 2.0rem);
  font-weight: 600;
  margin: 0;
}

.article__link {
  display: flex;
  flex-direction: column;
  color: #333333;
  height: 100%;
}

.article__link .see-more {
  display: block;
  text-align: right;
  margin-top: auto;
}

.article__link:hover .see-more {
  padding-right: 10px;
}
.article__link:hover .article__img-wrapper picture img {
  transform: scale(1.05);
}
.article-highlighted .article__link:hover .article__content {
  background-color: rgba(51, 51, 51, 0.7);
}

.article__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #F0F0F0;
  padding: 20px 20px 16px 20px;
  border-top: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.article__summary * {
  font-size: 1.8rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.4rem, 1.1vw, 1.8rem);
  font-weight: 300;
  line-height: 1.5;
  margin: 20px 0;
}

.article__theme {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  padding: 8px 15px;
  border-radius: 10px;
  text-transform: uppercase;
  color: #FFF;
  background-color: rgba(192, 202, 0, 0.8);
}

.article__published-date {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: #FFF;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.6);
}

.see-more {
  font-size: 1.6rem;
  font-weight: 600;
  color: #7F7D7C;
  line-height: 1;
  transition: all 0.2s ease;
}

.see-more::before {
  content: '+';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 5px 0 0;
  color: #EF7900;
}

.article__img-wrapper {
  position: relative;
  margin: 0;
  height: 0;
  overflow: hidden;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-bottom: 56.25%;
}

.article__img-wrapper picture {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  text-align: center;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.article__img-wrapper picture img {
  width: 100%;
  transition: all 0.2s ease;
}

@supports (object-fit: cover) {
  /* IF object-fit IS SUPPORTED */
  .article__img-wrapper picture img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

.article__img-wrapper.image-contain picture::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(51, 51, 51, 0.5);
  backdrop-filter: blur(30px);
}

.article__img-wrapper.image-contain picture img {
  position: relative;
  z-index: 1;
  object-fit: unset;
  object-position: unset;
  width: auto;
  margin: auto;
}

.article-container {
  width: 100%;
  max-width: 100%;
  margin-bottom: 30px;
}

.article-list {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  height: auto!important;
  padding-bottom: 0!important;
}

.lSAction {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.lSAction > a {
  position: relative;
  top: unset;
  width: 20px;
  height: 20px;
  background-color: rgba(255,255,255,0.6);
  border-radius: 40px;
  margin-top: 0;
  opacity: 1;
  transition: all 0.2s ease;
}

.lSAction > a:hover {
  
}

.lSAction > .lSPrev {
  left: unset;
  background-position: center;
  background-size: 20px;
  background-image: url('../images/assets/arrow-left.svg');
  background-repeat: no-repeat;
  margin-left: 0 !important;
}

.lSAction > .lSNext {
  right: unset;
  background-position: center;
  background-size: 20px;
  background-image: url('../images/assets/arrow-right.svg');
  background-repeat: no-repeat;
  margin-right: 0 !important;
}

.lSSlideOuter .lSPager.lSpg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%)!important;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin: 0 0 20px 0!important;
}

.lSSlideOuter .lSPager.lSpg>li {
  display: block;
  padding: 0 5px;
}

.lSSlideOuter .lSPager.lSpg>li a {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #E5E5E5;
  transition: all 0.2s ease;
}

.lSSlideOuter .lSPager.lSpg>li.active a,
.lSSlideOuter .lSPager.lSpg>li:hover a {
  background-color: #EF7900;
}

.article-container .lSSlideOuter,
.article-container .lSSlideWrapper {
  position: relative;
  width: 100%!important;
  max-width: 100%;
}

.see-all-wrapper > * + * {
  margin-left: 20px;
}

.see-all {
  display: inline-block;
  font-size: 1.6rem;
  font-size: clamp(1.4rem, 1.0vw, 1.6rem);
  font-weight: 600;
  color: #FFF;
  background-color: #EF7900;
  border-radius: 10px;
  padding: 10px;
}

.see-all:hover {
  background-color: #C0CA00;
  color: #FFF;
}

.see-all.white {
  color: #EF7900;
  background-color: #FFF;
  border: 1px solid #EF7900;
}

.see-all.white:hover {
  color: #FFF;
  background-color: #C0CA00;
  border: 1px solid #C0CA00;
}


/*----------------- AGENDA */

.agenda-wrapper {
  display: flex;
}

.agenda-wrapper > * + * {
  margin-left: 30px;
}

.agenda-wrapper .calendrier-wrapper {
  width: 33.33%;
  align-self: flex-start;
}

.agenda-wrapper .lSSlideOuter {
  flex: auto;
  max-width: 66.66%;
}

.agenda-wrapper .lSSlideOuter .lSPager.lSpg>li.active a,
.agenda-wrapper .lSSlideOuter .lSPager.lSpg>li:hover a {
  background-color: #008D9C;
}

.agenda-wrapper .article-list {
    flex: auto;
    display: flex;
    width: 100%;
}

.article__time__start-end {
  display: flex;
  margin-bottom: 10px;
}

.article__time.start-time,
.article__time.end-time {
  position: relative;
  color: #7F7D7C;
  font-weight: 600;
}

.article__time.end-time::before {
  content: '-';
  display: inline-block;
  margin: 0 5px;
}

.article__time.start-time span,
.article__time.end-time span {
  display: inline-block;
  line-height: 1;
}

.article-agenda .article__theme {
  background-color: rgba(28, 154, 170, 0.8);
}

.article-agenda .article__title {
  color: #008D9C;
}

/*----------------- PAGE */

.page .header-bandeau {
  padding: 0;
  max-height: 380px;
}

#breadcrumb {
  background-color: #F0F0F0;
  border-radius: 10px;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 5px 15px;
  margin: 30px 0 30px 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  color: #7F7D7C;
  font-size: 1.4rem;
  font-weight: 300;
}

.breadcrumb__item > a {
  display: flex;
  align-items: center;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  padding: 7px 0;
}

.breadcrumb__item + .breadcrumb__item {
  padding-left: 10px;
}

.breadcrumb__item + .breadcrumb__item::before {
    content: "\276D";   /* ❭ — chevron décoratif droit */
  /* content: "\232A";  /* 〉 — chevron type bracket */
  /* content: "\276F";  /* ❱ — version plus “heavy” */
  /* content: "\203A";  /* › — chevron angle simple */
  /* content: "\27AE";  /* ➮ — flèche stylisée */
  /* content: "\27A9";  /* ➩ — flèche ombrée droite */
  padding-right: 10px;
  color: #7F7D7C;
}

.content-page {
  padding: 0;
  margin-bottom: 8%;
}

.content-page p,
.content-page span,
.content-page div,
.content-page ul,
.content-page ol,
.content-page table {
  /*color: #7F7D7C;*/
  color: #333333;
  font-weight: 300;
  font-size: 1.8rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.4rem, 1.1vw, 1.8rem);
  line-height: 1.8;
}
.content-page p, .content-page span, .content-page div, .content-page ul, .content-page ol, .content-page table {
  /* color: #7F7D7C; */
  color: #333333;
  font-weight: 300;
  font-size: 1.8rem;
  font-size: clamp(1.4rem, 1.1vw, 1.8rem);
  line-height: 1.8;
}
.content-page .bulletins{
  text-align: center;
}

.content-page .bulletin {
  width: calc(100% / 4 - 42px);
  text-decoration: none;
}
.content-page .bulletin label {
  color: #EF7900;
}
@media (max-width: 1025px) {
  .content-page .bulletin {
    width: calc(100% / 3 - 42px);
  }
}
@media (max-width: 720px) {
  .content-page .bulletin {
    width: calc(100% / 2 - 42px);
  }
}
@media (max-width: 560px) {
  .content-page .bulletin {
    width: 100%;
  }
}
.content-page .bulletins {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.content-page .bulletin img {
  width: 100%;
  height: 300px !important;
  object-fit: contain;
}

.content-page a {
  color: #C0CA00;
  font-weight: 600;
  text-decoration: underline;
}

.content-page h1 {
  color: #EF7900;
  font-weight: 700;
  font-size: 4.0rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(2.4rem, 2.2vw, 4.0rem);
  margin: 0 0 20px 0;
}


.content-page h2 {
  color: #008D9C;
  font-weight: 600;
  font-size: 3.0rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(2.0rem, 1.6vw, 3.0rem);
}
.content-page h2 a{
  color: #008D9C;
}

.content-page h3 {
  display: inline-block;
  color: #FFF;
  background-color: #C0CA00;
  font-weight: 600;
  font-size: 2.4rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.8rem, 1.3vw, 2.4rem);
  padding: 4px 10px;
  border-radius: 10px;
}

.content-page h3 a, .content-page h3 span, .content-page h3 strong{
  color: #FFF;
}
/*----------------- DOCUMENTS */

.col-2 {
  display: flex;
  margin: 0 -10px;
}

.col-2 > * {
  width: calc(50% - 20px);
  margin: 0 10px;
}

#documents {
  padding: 30px 0;
  background-color: #F0F0F0;
}

#documents .title-bar {
  margin: 0 0 20px 0;
}

.document {
  display: flex;
}

.document__picture {
  flex:none;
  width: 100%;
  max-width: 315px;
  margin: 0 20px 0 0;
}

.document__image {
  border-radius: 10px;
  width: 100%;
}

.document__title {
  margin: 5px 0;
  color: #EF7900;
  font-size: 2.0rem;
  font-size: clamp(1.6rem, 1.1vw, 2.0rem);
  line-height: 2.4rem;
  font-weight: 600;
  text-transform: uppercase;
}

.document__summary {
  margin: 5px 0;
  color: #7F7D7C;
  font-size: 1.8rem;
  font-size: clamp(1.4rem, 1.1vw, 1.8rem);
  line-height: 2.0rem;
  font-weight: 300;
}

.document__btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 10px 0;
}

.document__btn {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  margin: 5px 0;
  color: #EF7900;
  background-color: #FFF;
  border: 1px solid #FFF;
  border-radius: 10px;
}

.document__btn img {
  margin-left: 8px;
}

.document__btn:hover {
  border-color: #EF7900;
}

.other-documents .document {
  padding: 10px 20px 10px 10px;
  background-color: #DFDFDF;
  border-radius: 10px;
}

.other-documents > * + * {
  margin-top: 20px;
}

.other-documents .document .document__picture {
  max-width: 135px;
}

/*----------------- FOOTER */

.newsletter {
  padding: 0 5%;
}

.newsletter form {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.newsletter form label {
  margin-right: 20px;
}

.newsletter form label span {
  display: block;
  color: #FFF;
  font-size: 1.6rem;
}

.newsletter .champs {
  flex: auto;
  display: flex;
  justify-content: flex-end;
}

.newsletter form label span:nth-child(1) {
  text-transform: uppercase;
  display: block;
  color: #FFF;
  font-weight: 700;
  font-size: 3.0rem;
  font-size: clamp(2.0rem, 1.6vw, 3.0rem);
}

/* TEMPORAIRE */
.newsletter form label span:nth-child(2) {
  display: none;
}

.newsletter form input[type='email'] {
  color: #7F7D7C;
  background-color: #FFF;
  border-radius: 10px;
  border: none;
  padding: 10px 15px;
  margin: 0 20px 0 0;
  width: 100%;
  min-width: 200px;
  max-width: 380px;
}

.newsletter form input[type='submit'] {
  color: #FFF;
  background-color: #EF7900;
  border: 1px solid #FFFFFF;
  border-radius: 10px;
  padding: 10px 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.newsletter form input[type='submit']:hover {
  background-color: #C0CA00;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #7F7D7C;
  font-weight: 300;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #7F7D7C;
  font-weight: 300;
}
::-ms-input-placeholder { /* Microsoft Edge */
  color: #7F7D7C;
  font-weight: 300;
}

footer.layout {
  padding-top: 30px;
  margin-top: 30px;
  background-color: #C0CA00;
  min-height: 100px;
}

.footer-infos {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #FFF;
  border-radius: 10px;
  padding: 35px 40px 35px 140px;
  margin: 30px 5%;
}

.footer-infos::after {
  position: absolute;
  left: -40px;
  bottom: 0;
  content: '';
  display: block;
  width: 140px;
  height: 148px;
  background-image: url('../images/assets/arbre-footer.svg');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;

}

.footer-infos > * + * {
  margin-left: 20px;
}

.footer-adresse {
  align-self: center;
}

.footer-adresse address {
  color: #7F7D7C;
  font-style: normal;
  font-weight: 400;
  line-height: 2.4rem;
}

.footer-adresse address p.label {
  color: #EF7900;
  font-weight: 600;
  font-size: 2.0rem;
  margin: 0 0 10px 0;
}

.footer-adresse address p {
  margin: 0;
}

.footer-links {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 360px;
}

.footer-links a {
  display: block;
  color: #FFF;
  font-weight: 600;
  background-color: #EF7900;
  padding: 10px 15px;
  margin: 5px;
  border: 1px solid #EF7900;
  border-radius: 10px;
}

.footer-links a:hover {
  /*
  color: #EF7900;
  background-color: #FFF;
  /**/
  background-color: #7F7D7C;
  color: #FFF;
  border: 1px solid #7F7D7C;
}

.footer-links a.link-vert {
  border-color: #C0CA00;
  background-color: #C0CA00;
}

.footer-links a.link-vert:hover {
  /*
  color: #C0CA00;
  background-color: #FFF;
  /**/
  background-color: #7F7D7C;
  color: #FFF;
  border: 1px solid #7F7D7C;
}

.footer-rs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.footer-rs a {
  flex: none;
  display: block;
  margin: 0 5px 10px 5px;
}

.footer-rs a img {
  display: block;
  width: 34px;
}

.bottom-bar {
  background-color:#008D9C;
  text-align: center;
  padding: 10px;
  margin: 20px 0 0 0;
}

.bottom-bar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.bottom-bar .container * {
  font-size: 1.6rem;
  /* clamp(MIN, VAL, MAX) */
  font-size: clamp(1.4rem, 1.1vw, 1.6rem);
  font-weight: 300;
  color: #FFF;
  padding: 0;
  margin: 0;
}

.bottom-bar a:hover {
  opacity: 0.6;
}

.cacherAncien{
	display:none;	
}