body {
  background-color: var(--body-bg-color);
  z-index: 0;
  min-height: 100%;
}



.region {
  width: 100%;
  background-color: #fff;
  z-index: 10;
}

.region-inner {
  width: 960px;
  margin: 0 auto;
}

.region-navbar {
  height: auto;
  background-color: var(--nav-bg-color);
}

.region-header {
  height: auto;
  background-color: var(--secondary-color);
}

.region-header-bottom {
  /* display: none; */
  height: auto;
  background-color: var(--main-bg-color);
}

.region-main {
  height: auto;
  background-color: var(--main-bg-color);
}

.region-footer {
  height: auto;
  background-color: var(--footer-bg-color);
}

.content-top {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}




/* Elements généraux */
/* ----------------- */

.title-h3 {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.6rem;
  padding-left: 8px;
  border-left: 6px solid #9b311b;
  margin-bottom: 20px;
}

.title-h4 {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4rem;
  padding-left: 8px;
  border-left: 6px solid #1b859b;
  margin-top: 10px;
  margin-bottom: 20px;
}

.title-h3 a,
.title-h4 a {
  color: #000;
  display: block;
  text-decoration: none;
  outline: none;  
}

p {
  display: block;
  margin-top: 10px;
  color: #000;
  font-size: 1.0rem;
  font-weight: 400;
  line-height: 1.3rem;
  text-align: justify;
}

p a {
  color: #000;
  text-decoration: none;
  outline: none;
  font-weight: bold;  
}

.link-read-more {
  display: block;
  margin-top: 10px;
  color: #000;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.3rem;
  text-align: left;
}

.link-read-more a {
  color: #000;
  text-decoration: none;
  outline: none;
  font-weight: 600;
}

.link-items {
  list-style: none;
}

.link-item {
  color: #000;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3rem;
  padding: 10px 0px 0px 0px;
}

.link-item a {
  color: #000;
  text-decoration: none;
  outline: none;
}

.link-item span {
  font-size: 0.9rem;
}

.list-items {
  display: block;
}

.list-item {
  padding-bottom: 20px;
}

.list-item-title {
  color: #000;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4rem;
}

.list-item-title a {
  color: #000;
  text-decoration: none;
  outline: none;
}

.list-item-content {
  color: #000;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.2rem;
  padding: 10px 0px 0px 10px;
  text-align: justify;
}



/* Nav */
/* --- */

nav {
  grid-area: nav;
  display: block;
  position: relative;
  z-index: 10;
  background-color: var(--nav-bg-color);
  padding-left: 10px;
  padding-right: 10px;
  /* min-width: 960px; */
}

.navbar-items {
  padding: 1rem 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* display: none; */
}

.navbar-item {
  list-style: none;
  margin-right: 2rem;
}

.navbar-item a {
  color: white;
  font-size: 1.0rem;
  font-weight: 500;
  text-decoration: none;
  outline: none;
  transition: all 200ms ease-in;
}

.navbar-item a:hover {
  display: block;
  color: orange;
  scale: 1.1;
}

.navbar-toggle {
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;

  padding: 1rem 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  
  display: none;
}

.navbar-toggle-svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: white; /* Modifie la couleur de l'image SVG */
  margin-right: 2rem;
}



/* Header */
/* ------ */

header {
  display: flex;
  position: relative;
  z-index: 20;
  /* background-color: var(--secondary-color); */
  padding: 25px 10px 25px 10px;
  color: #fff;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* min-width: 960px; */
}

/*
.container-page-front header {
  padding: 25px 10px 75px 10px;
}
*/

header.header-front-page {
  padding: 25px 10px 75px 10px;
}

header #logo-link {
  display: block;
  position: absolute;
  top: -40px;
  left: 35px;
  width: 80px;
}

header #logo-image {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 80px;
}

header h1 {
  display: block;
  font-size: 2.1rem;
  font-weight: 600;
  margin-top: 10px;
  text-align: center;
}


header h1 a {
  color: #fff;
  text-decoration: none;
  outline: none;
}

header h1 a span {
  font-size: 1.4rem;
  font-weight: 300;
}

header h2 {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 10px;
  text-align: center;
  padding-top: 10px;
}

header p {
  display: none;
  color: #fff;
  text-align: center;
  width: 90%;
}

header.header-front-page p {
  display: block;
}

header p a {
  color: #fff;
}

.navbar-dropdown {
  display: none;
  position: absolute;
  z-index: 300;
  top: 0px;
  height: 0;
  width: 100vw;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  /*border-radius: 10px;
  */overflow: hidden;
  transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.navbar-dropdown.navbar-open {
  height: auto;
  padding-bottom: 20px;
}

.navbar-dropdown li {
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-dropdown li a {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  text-decoration: none;
  outline: none;
}


/* header-bottom */




/* shortcut */
/* -------- */

#home-shortcut-wrapper {
  display: flex;
  position: relative;
  z-index: 20;
  background-color: var(--main-bg-color);
  width: 100%;
  /* height: 120px; */
  height: auto;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#home-shortcut {
  display: block;
  position: relative;
  top: -50px;
  z-index: 100;
  margin: 0 auto;
  background-color: var(--shortcuts-bg-color);
  border: 1px solid #ccc;
  border-radius: 20px;
  /* box-shadow: 0px 0px 10px var(--secondary-color); */
  box-shadow: 0px 0px 10px rgba(27, 133, 155, 0.5);
  width: 70%;
}

#home-shortcut .div-content {
  padding: 15px 25px 20px 25px;
}

#home-shortcut .div-content p {
  color: #000;
  color: #555;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2rem;
}

#home-shortcut .div-content p a {
  color: #000;
  font-size: 0.9rem;
  font-weight: 400;
  text-decoration: underline;
  outline: none;
}

#home-shortcut .div-button {
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 30px;
}

#home-shortcut .div-button button {
  display: block;
  background: none;
  background-color: #fff;
  background-color: #9b311b;
  border: 1px solid #777;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #d0d0d0;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
}


#home-shortcut .div-button button a {
  display: block;
  color: #9b311b;
  color: #fff;
  font-size: 1.0rem;
  font-weight: 500;
  padding: 6px 20px 8px 20px;
  text-decoration: none;
  outline: none;
}



/* Main */
/* ---- */

main {
  height: auto;
  padding-top: 45px;
  padding-bottom: 65px;
}

#page-home main {
  padding-top: 0px;
}

main {
  display: block;
  position: relative;
  z-index: 10;
  /* background-color: var(--main-bg-color); */
  /* padding: 60px 10px 40px 10px; */
  /* min-width: 960px; */
}

main .title-h3 {
  color: #000;
  font-size: 1.6rem;
}

main section {
  width: 100%;
  height: auto;
  background-color: white;
}



/* Footer */
/* ------ */

footer {
  display: flex;
  position: relative;
  z-index: 10;
  /* background-color: var(--footer-bg-color); */
  padding: 0px 10px 0px 10px;
  /* min-width: 960px; */
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#legacy {
  display: block;
  width: 100%;
  margin: 30px 0;
  border-top: 1px solid #fff;
}

#legacy p {
  color: #fff;
  margin: 20px auto 30px auto; 
  text-align: center;
  font-size: 0.9rem;
}




/* Medias queries */
/* -------------- */

@media (min-width: 1600px) {

}

@media (min-width: 1200px) and (max-width: 1599px) {

}

@media (min-width: 960px) and (max-width: 1199px) {

}

@media (min-width: 760px) and (max-width: 959px) {

  .region-inner {
    width: 90%;
  }

  /*
  nav .navbar-items {
    display: none;
  }

  nav .navbar-toggle {
    display: flex;
  }

  .navbar-dropdown {
    display: block;
  }

  header #logo-link {
    display: none;
  }
  */

}

@media (min-width: 480px) and (max-width: 759px) {

  .region-inner {
    width: 90%;
  }

  .navbar-items {
    display: none;
  }

  .navbar-toggle {
    display: flex;
  }

  .navbar-dropdown {
    display: block;
  }

  header #logo-link {
    display: none;
  }

  #home-shortcut-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #home-shortcut {
    position: relative;
    top: 0px;
    width: 95%;
    box-shadow: 0px 0px 0px;
  }

}

@media (min-width: 320px) and (max-width: 479px) {

  .region-inner {
    width: 90%;
  }

  .navbar-items {
    display: none;
  }

  .navbar-toggle {
    display: flex;
  }

  .navbar-dropdown {
    display: block;
  }

  header #logo-link {
    display: none;
  }

  #home-shortcut-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #home-shortcut {
    position: relative;
    top: 0px;
    width: 95%;
    box-shadow: 0px 0px 0px;
  }

}

@media (max-width: 319px) {

  .region-inner {
    width: 90%;
  }

  .navbar-items {
    display: none;
  }

  .navbar-toggle {
    display: flex;
  }

  .navbar-dropdown {
    display: block;
  }

  header #logo-link {
    display: none;
  }

  #home-shortcut-wrapper {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #home-shortcut {
    position: relative;
    top: 0px;
    width: 95%;
    box-shadow: 0px 0px 0px;
  }

}