/*!
Theme Name: ThemeNeutre
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: themeneutre
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ThemeNeutre is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "AbrilFatface";
  src: url("./fonts/AbrilFatface-Regular.ttf") format("truetype");
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  --background-site: #f9f9f9;
  --orange: #ff3d34;
  --beige: #fdf6e3;
  --beige2: #e9dec2;
  --blanc: #fff;
  --gris: #a39f88;
  --gris2: #dedee1;
  --gris3: #f8f8f8;
  --black: #000;
  --black2: #373535;
  --font1: "Poppins", sans-serif;
  --font2: "AbrilFatface", cursive;
}

body {
  background-color: var(--background-site);
  font-family: var(--font1);
  margin: 0;
  width: 100%;
}

body.menu_opened {
  overflow: hidden;
}

.site {
  overflow: hidden;
}

h1,
.titreh1 {
  font-size: 80px;
  font-weight: 400;
  font-family: var(--font2);
  line-height: 120%;
  color: black;
}

h2 {
  font-size: 40px;
  font-weight: 400;
  font-family: var(--font2);
}
h3 {
  font-size: 26px;
  font-weight: 600;
}
h4 {
  font-size: 18px;
  font-weight: 600;
}
p {
  font-size: 16px;
  font-weight: 400;
  color: var(--black2);
}

@media (max-width: 1400px) {
  h1 {
    font-size: 56px;
  }
}

@media (max-width: 600px) {
  h2 {
    font-size: 30px;
  }
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex__col {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.button {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  padding: 10px 35px;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.button__red {
  background-color: var(--orange);
  color: var(--blanc);
  border: 2px solid var(--orange);
}

.button__white {
  background-color: var(--blanc);
  border: 2px solid var(--orange);
  color: var(--orange);
}

.button__black {
  background-color: var(--black);
  border: 2px solid var(--black);
  color: var(--blanc);
}

.shadow {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/*    MENU PRINCIPAL    */

.main-navigation ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0 30px;
}

.main-navigation ul li {
  margin: 0;
  padding: 0;
  width: 150px;
  text-align: center;
}

.main-navigation ul li a {
  text-decoration: none;
  color: var(--black);
  font-weight: bold;
  font-family: var(--font2);
}

.main-navigation ul li ul {
  display: none;
  position: absolute;
  flex-direction: column;
}

.main-navigation ul li.menu-item-has-children:hover ul {
  display: flex;
}

.main-navigation ul li ul li a {
  text-decoration: none;
}

.burger {
  display: none;
}

.menu-menu-principal-container {
  font-family: "AbrilFatface";
}

/*    HEADER    */

.site-header {
  padding: 0 7vw;
  font-family: var(--font1);
  width: calc(100% - 14vw);
  background-color: var(--blanc);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.liste_menu {
  gap: 10px 15px;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.liste_menu .button {
  padding: 10px 25px;
}

#liste_footer {
  position: absolute;
  padding: 0;
  left: 50%;
  transform: translateX(-50%);
  flex-flow: wrap;
}

#liste_footer div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*    FOOTER    */

#colophon {
  padding: 0 7vw;
  width: calc(100% - 14vw);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--blanc);
}

footer nav div ul {
  list-style: none;
  padding: 0;
}

footer nav div ul a {
  text-decoration: none;
  color: var(--black);
  font-weight: bold;
  font-family: var(--font2);
}

#reseaux tr td {
  padding: 0;
}

#mentions {
  background-color: var(--background-site);
}

#mentions p {
  text-align: center;
  font-size: 14px;
}

@media screen and (max-width: 1000px) {
  .site-footer {
    flex-direction: column;
  }

  #liste_footer {
    position: relative;
    left: unset;
    transform: unset;
  }

  footer nav div ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px 60px;
    flex-flow: wrap;
    margin: 50px 0 40px 0;
  }

  footer nav div ul li {
    width: 100px;
    text-align: center;
  }
}

/* PRIMARY */
#primary {
  min-height: calc(100vh - 290px);
}

/* PAGE ANNUAIRE */

.annuaire {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin-top: 120px;
}

.filter {
  display: flex;
  justify-content: center;
  width: 25%;
  padding: 69px 85px;
  background-color: white;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.filter__container {
}

.filter__tarif {
  width: 300px;
}

.filter__tarif__range {
  position: relative;
  width: 300px;
  height: 5px;
  border-radius: 5px;
  background-color: #666;
}

.filter__tarif__ranger__progress {
  height: 5px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 5px;
  background: var(--orange);
}

.filter__tarif__range input {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  width: 100%;
  pointer-events: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
}

.filter__tarif__prix {
  width: 100%;
  display: flex;
  margin: 30px 0 35px;
}

.filter__tarif__prix__min {
  display: flex;
  width: 100%;
  height: 45px;
  align-items: center;
}

.filter__tarif__prix__max {
  display: flex;
  width: 100%;
  height: 45px;
  align-items: center;
}

.filter__tarif__prix__min input {
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 19px;
  margin-left: 12px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #999;
  -moz-appearance: textfield;
}

.filter__tarif__prix__max input {
  width: 100%;
  height: 100%;
  outline: none;
  font-size: 19px;
  margin-left: 12px;
  border-radius: 5px;
  text-align: center;
  border: 1px solid #999;
  -moz-appearance: textfield;
}

input[type="range"]::-webkit-slider-thumb {
  height: 17px;
  width: 17px;
  border-radius: 50%;
  background: var(--orange);
  pointer-events: auto;
  -webkit-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

input[type="range"]::-moz-range-thumb {
  height: 17px;
  width: 17px;
  border: none;
  border-radius: 50%;
  background: var(--orange);
  pointer-events: auto;
  -moz-appearance: none;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

.filter h2 {
  font-size: 36px;
  font-weight: 400;
  color: var(--orange);
  font-family: var(--font2);
  margin-top: 0;
}

.filter ul {
  list-style: none;
}

.annuaire__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 16px;
}

.annuaire__liste__profil {
  background-color: white;
  height: 566px;
  width: 398px;
  border-radius: 8px;
  overflow: hidden;
}

.annuaire__liste__profil__top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 209px;
  position: relative;
}

.annuaire__liste__profil__top__left {
}

.annuaire__liste__profil__top__left__img {
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
}

.annuaire__liste__profil__top__left span {
  font-size: 16px;
  font-weight: 600;
  color: var(--black2);
}

.annuaire__liste__profil__top__left__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.annuaire__liste__profil__top__right {
  position: relative;
}

.annuaire__liste__profil__top__right img {
  position: absolute;
  top: 38px;
  right: 20px;
}

.annuaire__liste__profil__top__right__prix {
  position: absolute;
  top: 76px;
  right: 59px;
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  color: white;
}

.annuaire__liste__profil__top__right__parjour {
  position: absolute;
  top: 118px;
  right: 57px;
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  color: white;
}

.annuaire__liste__profil__projets {
  background-color: var(--gris3);
  padding: 20px 15px;
  gap: 10px;
  width: calc(100% - 32px);
  height: calc(100% - 209px);
  margin: 16px;
  border-radius: 0px 8px 8px 8px;
}

.annuaire__liste__profil__projets__detail {
  width: 100%;
}

.annuaire__liste__profil__projets__detail__img {
  overflow: hidden;
  position: relative;
  height: 94px;
  width: 50%;
}

.annuaire__liste__profil__projets__detail__img img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.annuaire__liste__profil__projets__detail__texte {
  width: 50%;
  padding-left: 10px;
}

.nav-links {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.nav-links span,
.nav-links a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
}

.nav-links .next,
.nav-links .previous {
}

.nav-links span {
  background-color: var(--orange);
  color: white;
}

.nav-links a {
  background-color: white;
  color: black;
}

/*---------------*/

@media (max-width: 1400px) {
  .burger {
    position: relative;
    display: flex;
    width: 50px;
    height: 30px;
    padding: 10px 0;
    justify-content: space-around;
    z-index: 1000;
  }
  .burger div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 3px;
    background-color: black;
    border-radius: 8px;
    transition: all 0.5s;
  }
  .burger div:nth-child(1) {
    transform: translate(-50%, calc(-50% - 10px));
  }
  .burger div:nth-child(2) {
    transform: translate(-50%, -50%);
  }
  .burger div:nth-child(3) {
    transform: translate(-50%, calc(-50% + 10px));
  }

  .burger.show div {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .burger.show div:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .main-navigation {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    background-color: white;
    transform: translateX(100%);
    transition: all 0.5s;
    padding-bottom: 20vh;
  }

  .main-navigation.show {
    transform: translate(0);
  }

  .main-navigation ul {
    flex-direction: column;
  }

  .site-header .liste_menu {
    position: fixed;
    z-index: 999;
    bottom: 50px;
    left: 0;
    width: 100%;
    background-color: white;
    transform: translateX(100%);
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
    margin: 0;
    padding: 0;
  }

  .site-header .liste_menu.show {
    transform: translate(0);
  }

  .site-header .liste_menu ul {
    flex-direction: column;
  }
}

/*POSTS*/
.posts {
  width: calc(100% - 40px);
  padding: 0 20px;
  max-width: 1226px;
  flex-flow: wrap;
  gap: 16px;
}

.post__card {
  width: calc(33.33% - 10.66666px);
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
}

.post__card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}

.post__card__cat {
  font-size: 14px;
  padding: 5px 20px;
  margin: 20px 0 10px 0;
}

.post__card__date {
  font-size: 14px;
  color: var(--black2);
}

.post__card__title {
  font-size: 20px;
  font-weight: bold;
  color: var(--black);
  margin-bottom: 30px;
}