/*#F2F2F2
#1A1A1A
 #B87A2E*/

/*sticky header
 current item
 */

:root {
  /*fonts*/
  --font-main: "Archivo", sans-serif;

  /*colors*/
  --bg-color: #f2f2f2;
  --highlight-color: #b87a2e;
  --text-color: #1a1a1a;
  --text-lighter-color: #3d3d3d;
  --filet-color: #1a1a1a61;

  /*margins*/
  --side-margins-large: auto;
  --side-margins-medium: 3.5rem;
  --side-margins-tablet: 2.5rem;
  --side-margins-mobile: 1rem;

  --cursor-right-medium: 4rem;

  /*text sizes*/
  --menu-fontsize: 1.5rem;
  --title-fontsize: 3rem;
  --title-2-fontsize: 2rem;
  --text-fontsize: 1.5rem;

  --title-fontsize-mobile: 3rem;
  --text-fontsize-mobile: 1.6rem;

  --title-line-h: 1.3;
  --courant-line-h: 1.6;

  /*transitions*/
  --main-time: 0.3s;

  /*font-weight*/
  --text-fontweight: 350;
  --menu-fontweight: 400;
  --title-fontweight: 450;
}
/*cleaning*/
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
/*separateurs*/
.wp-block-separator {
  margin: 0;
  border: none;
  background: var(--filet-color);
  height: 1px;
}
.entry-summary {
  margin: 0;
}

html,
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
  line-height: 1.7;

  /* overflow-x: hidden;*/
}
.page-template-default,
.archive,
.post-template-default,
.home {
  margin: 0 var(--side-margins-medium) 5rem var(--side-margins-medium);
}
/*margins*/
h1,
h2,
h3,
h4 {
  margin-bottom: 0.1em;
  line-height: var(--title-line-h);
}
p,
ul,
li,
a {
  margin-bottom: 0.5rem;
  font-size: var(--text-fontsize);
  color: var(--text-color);
  font-weight: var(--text-fontweight);
  line-height: var(--courant-line-h);
}
.entry-summary p {
  max-width: 95%;
  font-size: 1.3rem;
  margin: 0;
}
.entry-content p {
  margin: 0 1rem 0 0 !important;
  padding-bottom: 1rem;
  max-width: 1080px;
  padding-left: 0.2rem;
}
.entry-content .no-padding-bottom {
  padding-bottom: 0 !important;
}
.postz-header h1 {
  margin: 0;
}
.entry-content h4 {
  margin-bottom: 0.5em;
}

.liste {
  max-width: 75%;
}
.entry-content .flex-bloc p {
  max-width: 100%;
}
h4,
h4 a {
  font-size: var(--title-2-fontsize);
  font-weight: var(--menu-fontweight);
}
ul,
p {
  margin-bottom: 1rem;
}

a {
  color: var(--highlight-color);
}
a:visited {
  color: var(--highlight-color);
}
h1,
.archive-grid-contenu h3 {
  color: var(--highlight-color);
}
.archive-grid-contenu h3 {
  margin: 0;
}
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-color);
  font-weight: var(--title-fontweight);
}

h1 {
  font-size: var(--title-fontsize);
  font-weight: var(--title-fontweight);
}
h3,
h2 {
  font-size: 2.3rem;
  font-weight: 400;
}
h5 {
  font-size: var(--text-fontsize);
  font-weight: var(--title-fontweight);
}

.entry-content ul {
  padding-left: 1.5rem;
  margin: 1.5rem 0.5rem;
}

/*menu*/
#masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--bg-color);
  position: sticky;
  top: 0;
  z-index: 11;
  padding: 1.5rem 0 1rem 0;
  margin: 0;
}
.main-navigation {
  width: auto;
}

.site-description,
.site-title {
  position: absolute;
  left: -10000px;
}
.site-branding {
  max-width: 250px;
  width: 100%;
}
.site-branding a {
  margin: 0;
}
.menu-item {
  padding-left: 1.5rem;
  color: var(--text-color);
}
.menu-item a {
  color: var(--text-color);
  font-size: var(--menu-fontsize);
}
.menu-item a:hover {
  color: var(--highlight-color);
}

.site-branding a svg path {
  fill: var(--text-color);
  transition: var(--main-time);
}

.site-branding a:hover > svg path {
  fill: var(--highlight-color);
}

/*page templatet*/

.right-column,
.side-image {
  width: 50%;
  padding: 1rem 0 0 3rem;
  min-width: 50%;
}
.side-image img {
  width: 100%;
  padding-bottom: 1rem;
}
.left-column {
  padding-right: 0.75rem;
}
.entry-header {
  display: none;
}

/*archive*/
.archive-grid.grid {
  margin: 0 -1rem;
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  width: calc(100% / 2);
  padding: 1rem;
}
.category-temoignages .grid-item {
  width: calc(100% / 3);
}

.imagette {
  padding-bottom: 0.5rem;
}

.imagette img {
  max-width: 100%;
  width: 100%;
  display: block; /* Cela enlève l'espace en dessous de l'image qui est dû à l'alignement en ligne par défaut */
}

/* Assurez-vous que le titre et le texte des descriptions prennent tout l'espace vertical disponible */
.grid-item-content {
  flex: 1;
}

/* Élément pour l'espace de remplissage si nécessaire */
.grid-item-fill {
  flex-grow: 1;
}
.imagette img {
  max-width: 100%;
  width: 100%;
}
.grid-item a {
  text-decoration: none;
}
.custom-fields {
  display: flex;
}
.custom-fields p {
  padding-right: 0.5rem;
  font-style: italic;
  margin: 0;
}

/*footer*/

#colophon .site-info {
  position: absolute;
  left: -10000px;
}

/*scroll up*/
#back-to-top-btn {
  font-family: "Inter", sans-serif;
  font-size: 2rem;
  font-weight: 600;
  width: 48px;
  height: 48px;

  position: fixed;
  right: var(--cursor-right-medium);
  bottom: 1.5rem;

  background-color: var(--bg-color);
  border: solid;
  border-color: var(--text-lighter-color);
  border-radius: 100%;
  color: var(--text-lighter-color);
  border-width: 2px;
  padding: 0.3rem;
  cursor: pointer;
}
#back-to-top-btn:hover {
  border-color: var(--highlight-color);
  color: var(--highlight-color);
}
#back-to-top-btn {
  display: none;
}

/* ================== MOBILE-MENU ================ */

#header-widget-area-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
#menu a {
  font-size: 2.3rem;
  text-align: right;
}
#menuToggle {
  width: auto;
  height: auto;
  display: none;
  position: relative;
  top: 1rem;
  right: 0;

  z-index: 15;

  -webkit-user-select: none;
  user-select: none;
}
.sub-menu {
  display: flex;
  width: 100%;
}
/*makes 2022 visible in mobile-menu*/
#menu .sub-menu {
  left: 0 !important;
  position: relative !important;
  top: 0 !important;
}
.sub-menu li {
  padding-top: 1rem;
}
#menu .sub-menu li a {
  font-size: 1.8rem;
}
#menuToggle a {
  text-decoration: none;
  color: #232323;

  transition: color 0.3s ease;
}

#menuToggle a:hover {
  color: var(--text-color);
}

#menuToggle input {
  display: block;
  width: 180px;
  height: 40px;
  position: absolute;
  top: -7px;
  left: -5px;

  /*cursor: pointer;*/

  opacity: 0; /* hide this */
  z-index: 16; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span {
  display: block;
  /* display:none;*/
  width: 2rem;
  height: 3px;
  margin-bottom: 8px;
  position: relative;

  background: var(--text-color);
  border-radius: 3px;

  z-index: 15;

  transform-origin: 0px 0px;

  transition: all ease-in-out 0.3s;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span {
  /*transform: translate(10rem,10rem);*/
}
#menuToggle input:checked ~ span,
#menuToggle input:hover ~ span {
  opacity: 1;
  /* transform: rotate(45deg) translate(-1px, -1px);*/
  background: var(--highlight-color);
  height: 4px;
  margin-bottom: 7px;
}
#menuToggle input:hover

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3) {
  /* opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);*/
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2) {
  /*transform: rotate(-45deg) translate(0, -1px);*/
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu {
  position: absolute;
  margin: 0;
  padding-top: 0;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */

  transform-origin: 0% 0%;

  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
  top: 4rem;
  right: 0;
  /*display: none;*/
  transform: translate(150%, 0);
  overflow: hidden;
  background-color: var(--bg-color);
  padding: 1rem 0 0 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
}

#menu li {
  padding: 1rem 0;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ div {
  transform: translate(0%, 0);
}
/*met le menu des langues en une ligne*/
.menu-mobile-area ul {
  display: flex;
  justify-content: flex-end;
}

/*menu principal en une colonne*/
.mobile-menu .menu {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}
/*MOBILE-MENU-END*/

.wp-block-uagb-image-gallery {
  margin-top: 1.5rem;
}

.post-grid {
  width: calc(100% + 20px) !important;
}

.post-grid .wp-element-caption {
  background: transparent !important;
  bottom: 1rem !important;
  left: -0.5rem !important;
  text-align: left !important;
}
.wp-block-gallery {
  max-width: 100%;
}
/*  .current_page_item a, .current-menu-item a {
color: var(--highlight-color) !important;
}*/
/*current page*/
#primary-menu .current_page_item a,
#primary-menu .current-menu-item a,
.current_page_item a,
.current-menu-item a {
  color: var(--highlight-color);
}
#menu .current_page_item a,
#menu .current-menu-item a {
  color: var(--title-color);
  filter: none;
}

@media screen and (max-width: 1080px) {
  #menuToggle {
    display: block;
  }
  /*making desktop-menu hidden*/
  #primary-menu,
  #header-widget-area {
    display: none;
  }
}

@media screen and (min-width: 1600px) {
  .page-template-default,
  .archive,
  .post-template-default,
  .home {
    margin: 0 var(--side-margins-large);
    max-width: calc(1600px - var(--side-margins-medium));
  }
}

@media screen and (max-width: 1080px) {
  .flex-bloc {
    flex-direction: column-reverse;
  }
  .left-column {
    padding-right: 0;
  }
  .right-column {
    padding-left: 0;
  }
  .page-template-default,
  .archive,
  .post-template-default,
  .home {
    max-width: 100%;

    margin: 0 var(--side-margins-tablet);
    max-width: inherit;
  }

  .right-column,
  .side-image {
    width: 100%;
    padding-left: 0;
    max-width: 100%;
  }

  .wp-block-gallery {
    column-count: 2 !important;
  }
}
@media screen and (max-width: 900px) {
  .grid-item {
    width: 100%;
  }
  .category-temoignages .grid-item {
    width: calc(100% / 2);
  }
}
@media screen and (max-width: 37.5em) {
  h1,
  h2,
  h3 {
    font-size: var(--title-fontsize-mobile);
  }
  .wp-block-gallery {
    column-count: 1 !important;
  }
  .archive-grid.grid {
    display: block;
  }
  .grid-item,
  .category-temoignages .grid-item {
    width: 100%;
  }
  .page-template-default,
  .archive,
  .post-template-default,
  .home {
    margin: 0 var(--side-margins-mobile);
  }
  #back-to-top-btn {
    right: var(--side-margins-mobile);
  }
  .site-branding {
    max-width: 220px;
  }
}
/*coming soon*/
.cs-page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5rem 0;
}
.rf-logo {
  width: 70px;
}
.edit-link {
  display: none;
}
.eb-gallery-img-wrapper.masonry .eb-gallery-img-content img {
  min-width: 100%;
}
.archive .page-title {
  position: absolute;
  right: 1000000px;
}