/* ------------------------------------ *\
  CONTENTS
\* ------------------------------------ */

/**
 * CONTENTS..............You’re reading it!
 * LAYOUT - PAGE NODE .....................
 * BASE STYLE .............................
 * BREADCRUMB .............................
 * HEADER IMAGE ...........................
 * NIVEAUX DE TITRES PAGE .................
 * HEADER NAVBAR...........................
 * IMAGE PRE FOOTER .......................
 * MEDIA QUERIES ..........................
*/

/* ------------------------------------ *\
  ==LAYOUT - PAGE NODE
\* ------------------------------------ */
.container--section {
  padding-left: 8rem;
  padding-right: 8rem;
}

.page.page-header {
  padding: 2rem 0;
}

/* ------------------------------------ *\
  ==BASE STYLE
\* ------------------------------------ */
.field--name-field-page-components
  > .field__item:not(:first-of-type, :last-of-type) {
  margin: 2rem 0;
}

.top-bar {
  background-color: var(--bs-gray);
}

/* ------------------------------------ *\
  ==BREADCRUMB
\* ------------------------------------ */
.breadcrumb a {
  color: var(--bs-blue);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.875rem;
}

.breadcrumb li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
}

.breadcrumb li:last-of-type {
  flex: unset;
  white-space: normal;
}

.breadcrumb-item + .breadcrumb-item:before {
  content: '\f054';
  color: var(--bs-black);
  font: var(--fa-font-regular);
  font-size: 1rem;
}

.breadcrumb-item + .breadcrumb-item a {
  color: var(--bs-blue);
  font-size: 0.875rem;
  text-transform: unset;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item {
  color: var(--bs-black);
  font-weight: 500;
  font-size: 0.875rem;
  text-transform: unset;
}

.region-breadcrumb {
  margin: 1rem 9rem;
  padding-left: 0;
}

/* ------------------------------------ *\
  ==HEADER IMAGE
\* ------------------------------------ */
.page-node-type-page .header-image img {
  height: auto;
  width: 100%;
}

/* ------------------------------------ *\
  ==NIVEAUX DE TITRES PAGE
\* ------------------------------------ */
h2 {
  font-size: 2.5rem;
  font-weight: 500;
  word-break: break-word;
}

h3 {
  position: relative;
  z-index: 0;
  font-size: clamp(1rem, calc(1rem + 1.4vw), 1.563rem);
  font-weight: 500;
  word-break: break-word;
}

.page-node-type-page .paragraph-texte:not(.bg-gray, .bg-blue) h3:before,
.page-node-type-page .paragraph-link-list h3:before {
  content: '';
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  background-color: var(--bs-yellow);
  position: absolute;
  z-index: -1;
  left: -0.8rem;
  top: -0.3rem;
}

/* ------------------------------------ *\
  ==HEADER NAVBAR
\* ------------------------------------ */

header .block-system-branding-block {
  background-color: var(--bs-blue);
}

/* ------------------------------------ *\
  ==MEDIA QUERIES
\* ------------------------------------ */
@media screen and (max-width: 1399.99px) {
  .region-breadcrumb {
    margin: 1rem 2rem;
  }
}

/* layout - page node */
@media screen and (max-width: 1399.98px) {
  .container--section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media screen and (max-width: 767.98px) {
  header .menu--main ul.navbar-nav li a:not(.dropdown-item) {
    font-size: 1.375rem;
  }

  .top-bar {
    background-color: var(--bs-white);
  }

  .region-breadcrumb.container {
    width: unset;
  }

  .dropdown-menu.nav-level-1.show {
    border-top-color: transparent;
    margin-top: -0.6rem;
    margin-left: 0.3rem;
  }

  main {
    padding-bottom: 3.125rem;
  }
}

@media screen and (max-width: 575.98px) {
  h2 {
    font-size: 1.755rem;
  }

  h3 {
    font-size: 1.375rem;
  }

  .breadcrumb li {
    align-items: unset;
  }

  .breadcrumb-item + .breadcrumb-item:before {
    margin-top: 0.2rem;
  }
}