html {
  font-family: 'Montserrat', sans-serif !important;
  color: #111111;
  scroll-behavior: smooth;
}

.front .region-content {
  padding: 0;
}

main:not(.front) {
  margin-top: 2rem;
}

/*** Navbar ***/
.navbar .dropdown-toggle::after {
  border: none;
  content: "\f067";
  font-family: "Font Awesome 5 Free";
  font-size: 10px;
  font-weight: bold;
  vertical-align: middle;
  margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
  position: relative;
  margin-right: 25px;
  padding: 35px 0;
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--light) !important;
  outline: none;
  transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
  padding: 20px 0;
  color: var(--dark) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--secondary) !important;
}

.navbar-light .navbar-brand h1 {
  color: #FFFFFF;
}

.navbar-light .navbar-brand img {
  max-height: 100%;
  transition: .5s;
  height: 70px;
}

.navbar-light.front .navbar-brand img {
  display: none;
}

.navbar:not(.sticky-top) {
  padding: 0;
}

.sticky-top {
  top: -1px;
}

.sticky-top.navbar-light {
  position: fixed;
  background: #FFFFFF;
  width: 100%;
}

/* .navbar-brand img {
  display: none;
} */

.sticky-top.navbar-light .navbar-brand img {
  display: block !important;
}

.navbar-toggler {
  display: none;
}

.page-node-type-page .navbar-light:not(.sticky-top) {
  color: #FFFFFF !important;
  background-color: #CC9999 !important;
}

.menu-btn {
  display: block;
}

/* Styling the menu button */
.menu-btn {
  position: absolute;
  z-index: 3;
  right: 35px;
  top: 33px;
  cursor: pointer;
  transition: all 0.5s ease-out;
}

.navbar-light.page .menu-btn {
  top: 25px;
}

/* Styling the hamburger lines */
.menu-btn .btn-line {
  width: 28px;
  height: 3px;
  margin: 0 0 5px 0;
  background: #FFFFFF;
  transition: all 0.5s ease-out;
}

.menu-btn.close .btn-line,
.navbar.sticky-top .btn-line {
  background: #111111;
}

/* Adding transform to the X */
.menu-btn.close {
  transform: rotate(180deg);
}

/* Styling the three lines 
  to make it an X */
.menu-btn.close .btn-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.close .btn-line:nth-child(2) {
  opacity: 0;
}

.menu-btn.close .btn-line:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

.container-fluid.home {
  display: flex;
  align-items: end;
  background-position: 50% 59.43%;
  object-fit: cover;
  vertical-align: middle;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  min-height: 700px;
  max-height: 700px;
}

.accroche-titre {
  font-size: 2rem;
  letter-spacing: 17px;
  text-transform: uppercase;
  font-weight: 200;
  margin: 180px auto 40px;
  color: #FFFFFF;
  font-family: 'Montserrat';
}

.w-30 {
  max-width: 100%;
}

.social-links-container {
  white-space: nowrap;
  height: 32px;
  min-height: 16px;
  width: 156px;
  min-width: 108px;
  margin: 50px auto 14px;
}

.paragraph--type--social-links svg {
  color: #FFFFFF;
}

/* Introduction */
.paragraph--type--introduction {
  padding: 3rem 4rem;
}

.paragraph--type--introduction .border-intro {
  border: 12px solid #e19191;
  margin-top: 1rem;
}

.paragraph--type--introduction .border-intro>div {
  margin: 0;
  position: relative;
}

.paragraph--type--introduction .border-intro p {
  padding: 1rem;
}

.paragraph--type--introduction h2 {
  font-size: 3rem;
  letter-spacing: 8px;
  font-weight: 300;
  margin: 0 auto;
  position: absolute;
  top: -57px;
  right: -3px;
  padding: 4px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
}

.paragraph--type--paragraph-2-colonnes .container>div {
  flex-direction: column;
  padding: 0;
}

.paragraph--type--paragraph-2-colonnes .colonne {
  max-width: 100%;
}

.paragraph--type--paragraph-2-colonnes .colonne div {
  padding: 20px;
  position: relative;
  flex: 1;
  max-width: 100%;
  transition-duration: inherit;
}

.paragraph--type--paragraph-2-colonnes .colonne div p {
  margin-top: 0;
  font-size: 1.25rem;
  margin-left: 0;
  margin-right: 0;
  word-wrap: break-word;
  position: relative;
  margin-bottom: 20px;
}

.paragraph--type--paragraph-2-colonnes .background,
.paragraph--type--tryptique-cards .background {
  background-color: #f3d0d0;
}

.paragraph--type--tryptique h3 {
  font-size: 3.75rem;
  letter-spacing: 8px;
  font-weight: 300;
  font-style: normal;
  margin: 60px auto 30px;
}

.paragraph--type--tryptique p {
  margin: 30px 570px 60px 158px;
}

.paragraph--type--tryptique .media--type-image .background-effect {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.paragraph--type--tryptique .media--type-image .background-effect:hover:before {
  opacity: 1;
  transition: all 500ms ease;
}

.paragraph--type--tryptique .media--type-image .background-effect:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.paragraph--type--tryptique .media--type-image {
  position: relative;
}

.paragraph--type--tryptique p {
  padding: 22px;
  margin: 0;
}

.paragraph--type--tryptique-cards .container {
  padding: 60px 0;
}

.paragraph--type--card.card {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
  padding: 20px;
  background-color: #f3d0d0;
  border: none;
  width: 22rem;
}

.paragraph--type--card.card .card-body .card-text {
  margin-bottom: 25px;
}

.paragraph--type--card.card .card-body {
  padding: 0;
}

.paragraph--type--card.card .card-body .card-title {
  padding: 18px 0;
}

.paragraph--type--card.card .field--name-field-bouton a {
  color: #ffffff !important;
  background-color: #e19191 !important;
  padding: 10px 30px;
  text-decoration: none;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
}

.paragraph--type--card.card:hover {
  background-color: #FFF;
}

.paragraph--type--card.card .field--name-field-bouton {
  margin-top: 2rem;
}

.tryptique-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  gap: 1rem;
}

.paragraph--type--avis h2 {
  font-size: 3.75rem;
  letter-spacing: 8px;
  font-weight: 300;
  margin: 0;
  padding: 15px;
  line-height: 1.1;
}

.paragraph--type--avis p {
  font-size: 1.25rem;
  font-weight: 300;
  margin: 0;
  padding: 15px;
  word-wrap: break-word;
  position: relative;
}

.paragraph--type--avis .row {
  padding: 50px 0;
}

.paragraph--type--avis-item .d-flex {
  padding: 25px 20px;
}

.paragraph--type--avis-item .d-flex .field--name-field-texte:before {
  background-color: currentColor;
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  height: 40px;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  -webkit-mask-image: url(../../femmes_tempete/images/quote.svg);
  mask-image: url(../../femmes_tempete/images/quote.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
  width: 50px;
  color: #eab0b0;
  position: absolute;
  left: -80px;
}

.paragraph--type--avis-item .d-flex .field--name-field-texte {
  font-weight: 300;
  margin: 1px 0 0;
  word-wrap: break-word;
  position: relative;
}

.paragraph--type--avis-item .d-flex .field--name-field-auteur {
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 19px 0 0;
}

.paragraph--type--contact .d-flex {
  padding: 0;
  flex-wrap: wrap;
  position: relative;
}

.paragraph--type--contact .background {
  background-color: #ffffff;
}

.paragraph--type--contact .field--name-field-formulaire {
  background-color: #ffffff;
  padding: 20px;
}

.paragraph--type--contact .form-control {
  border-color: #e19191;
  stroke: #e19191;
  border-width: 2px;
  border-left-style: none;
  border-right-style: none;
  border-top-style: none;
  border-radius: 0;
}

.paragraph--type--contact #edit-actions {
  text-align: center;
}

.paragraph--type--contact #edit-submit {
  margin: 0;
  color: #ffffff !important;
  background-color: #e19191 !important;
  border-style: none;
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 1px;
  background-image: none;
  padding-left: 60px;
  padding-right: 60px;
  margin-top: 1px;
  margin-bottom: 1px;
  position: relative;
}

.paragraph--type--contact #edit-submit:hover {
  opacity: 90%;
}

.paragraph--type--contact .texte-accroche {
  background-color: #f3d0d0;
  padding: 15px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  flex: 57%;
}

.paragraph--type--contact .texte-accroche h1 {
  font-size: 1rem;
  text-decoration: none solid rgb(255, 255, 255);
  letter-spacing: 2px;
  font-weight: 300;
  text-transform: none;
  margin: 0;
  color: #FFFFFF;
}

.paragraph--type--beauty-1,
.paragraph--type--beauty-2 {
  margin-bottom: 2rem;
}

.block-page-title-block {
  text-align: center;
  margin: 0px 0 35px;
  padding: 20px;
  background-color: #CC9999;
  color: #ffffff;
  border-radius: 16px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
}