html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-texte);
  font-stretch: normal;
  font-weight: 100;
  font-size: var(--font-size-medium);
  line-height: 1.2;
}

body.scroll-blocked {
  overflow-y: hidden;
}

#wrap {
  min-height: 100%;
}

/* polylang affiche ce truc, seul moyen de l'enlever, c'est une interférence avec le header mobile */
#wrap > .lang-item {
  display: none !important;
}

#main-container {
  background: var(--couleur-fond);
  display: flex;
  flex-direction: column;
  transition: var(--transition-basic);
}

body
  .is-layout-constrained
  > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--contentSize);
}

body .is-layout-constrained > .alignwide {
  max-width: var(--wideSize);
}

.container-title,
.container-metas,
.container-content,
.alignwide {
  width: 100%;
  max-width: var(--wideSize);
  margin-left: auto;
  margin-right: auto;
}

.container-content {
  padding-bottom: 5vh;
  font-size: var(--font-size-medium);
}

/* body.page:not(.home) .container-content,
body.single .container-content {
    width: var(--contentSize);
} */

.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  max-width: 100vw;
}

body.has-scrollbar .alignfull {
  width: calc(100vw - var(--scrollbar-width));
  position: relative;
  left: 50%;
  /* right: 50%; */
  margin-left: -49.55vw;
  /* margin-right: -49.55vw; */
  max-width: calc(99.1vw);
}

body.scroll-blocked .alignfull {
  max-width: calc(100vw);
  margin-left: -50vw;
}

body.has-scrollbar .alignfull {
  margin-left: calc(-50vw + var(--scrollbar-width) / 2);
  max-width: calc(100vw - var(--scrollbar-width) - 1px);
}

.wp-block-group {
  padding-top: var(--spacingBlockGroup);
  padding-bottom: var(--spacingBlockGroup);
}

a {
  text-decoration: none;
  transition: var(--transition-basic);
  color: var(--couleur-liens);
}

a:hover {
  color: var(--couleur-liens-hover);
}

/* certains liens peuvent rester inchangés (titres...)*/
a.no-link-style,
a.no-link-style:hover {
  color: inherit;
}

a:focus,
a:active {
  outline: 0;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-family: var(--font-titre);
  position: relative;
}

h1 {
  font-size: var(--font-size-xx-large);
}

/***************************************************************************/
/* Tailles de containers                                                   */
/***************************************************************************/

.container-title,
.container-metas {
  width: var(--wideSize);
}

/*A voir : cette règle fout le bordel avec .aligncenter;
/*body.archive .container-content,
body.search .container-content,
body.blog .container-content,
body.single .container-content {
    width: var(--wideSize);
}*/

.container-full-height {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.display-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: left;
  column-gap: 1.5rem;
}

.display-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3rem;
}

.display-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 5vw;
}

* + .display-grid {
  margin-top: 2.5rem;
}

/***************************************************************************/
/* Ecran de chargement                                                     */
/***************************************************************************/
.fond-chargement {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: var(--couleur-fond);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 10000;
}

.fond-chargement .logo-site {
  width: 16vw;
  height: auto;
  min-width: 250px;
}

.fond-chargement .loading-site {
  height: 50px;
  width: 50px;
}

.fond-chargement * + .loading-site {
  margin-top: 2rem;
}

.fond-chargement .lds-spinner {
  width: 100%;
  height: auto;
}

/***************************************************************************/
/* Header & Footer                                                        */
/***************************************************************************/

header,
footer {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--couleur-fond);
}

header * {
  transition: all var(--transition-basic-duration);
}

header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/*Menu drawer*/
header .menu-trigger {
  position: absolute;
  caret-color: transparent;
  text-align: right;
  width: 8rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--couleur-1);
  padding: 0.3rem 1rem 0.3rem 0;
  color: var(--couleur-3);
  font-family: var(--font-text);
  font-weight: bold;
  font-size: var(--font-size-menu-drawer);
}

header .menu-trigger:hover {
  cursor: pointer;
  user-select: none;
  left: 0;
}

header.menu-drawer .block-primary-menu {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  left: calc(-100vw - var(--menu-drawer-padding));
  top: 0;
  bottom: 0;
  z-index: 10;
}

header.menu-drawer .block-primary-menu.active {
  left: 0;
}

header.menu-drawer .menu-menu-principal-container {
  width: var(--menu-drawer-width);
  height: 100vh;
  background-color: var(--couleur-1);
  left: 0;
  top: 0;
  bottom: 0;
}

header.menu-drawer .menu-menu-principal-container ul.menu {
  width: 100%;
  height: 100%;
  padding-left: var(--menu-drawer-padding);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

header.menu-drawer .menu-menu-principal-container ul.menu li {
  font-size: var(--font-size-menu-drawer);
  margin-left: 0;
}

header:not(.menu-drawer) .menu-closer {
  display: none;
}

header .menu-closer {
  position: absolute;
  left: calc(var(--menu-drawer-width) - 2rem - var(--menu-closer-width));
  top: 2rem;
  width: var(--menu-closer-width);
  height: var(--menu-closer-width);
}

header .menu-closer:hover {
  cursor: pointer;
  transform: rotate(180deg);
}

header .menu-closer__line {
  background-color: #000;
  width: calc(1.414 * var(--menu-closer-width));
  height: calc(var(--menu-closer-width) / 8);
  border-radius: 99rem;
  transform-origin: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

header .menu-closer__line--1 {
  transform: translate(-50%, -50%) rotate(-45deg);
}

header .menu-closer__line--2 {
  transform: translate(-50%, -50%) rotate(45deg);
}

body.admin-bar header.fixed {
  top: 32px;
}

/* Tablettes et Smartphones */
@media (max-width: 991px) {
  body.admin-bar header.fixed {
    top: 0;
  }
}

.header-container,
.footer-container,
.footer-sub-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: var(--wideSize);
  transition: var(--transition-basic);
}

.footer-sub-container {
  justify-content: center;
  width: 100%;
}

.header-container .block-logo {
  display: flex;
  align-items: center;
}

.header-container .block-logo img {
  min-height: 80px;
  width: auto;
  transition: var(--transition-basic);
}

header.mini .header-container .block-logo img {
  min-height: 60px;
}

.block-copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-small);
}

.block-copyright .item-copyright + .item-copyright::before {
  content: "-";
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/***************************************************************************/
/* Header Menu & Footer Menu                                               */
/***************************************************************************/

.block-primary-menu ul.menu,
.block-footer-menu ul.menu {
  display: flex;
  align-items: center;
}

.block-primary-menu ul.menu > li,
.block-footer-menu ul.menu > li {
  position: relative;
  line-height: 1;
}

.block-primary-menu ul.menu > li {
  font-size: var(--font-size-menu-principal);
}

.block-footer-menu ul.menu > li {
  font-size: var(--font-size-menu-footer);
}

.block-primary-menu ul.menu > li > a,
.block-footer-menu ul.menu > li > a {
  padding: 0.5rem 0.75rem;
  display: block;
}

.block-primary-menu ul.menu > li:hover > a,
.block-primary-menu ul.menu > li.current-menu-item > a,
.block-primary-menu ul.menu > li.current-menu-ancestor > a {
  color: var(--couleur-liens-hover);
}

.block-primary-menu ul.menu > li + li,
.block-footer-menu ul.menu > li + li {
  margin-left: 1rem;
}

.block-primary-menu ul.sub-menu {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  background: var(--couleur-fond);
  width: calc(var(--submenu-width) + 1rem);
  min-width: calc(100% + 1rem);
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  height: 0;
  opacity: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: -1rem;
  margin-right: -1rem;
  transition:
    var(--transition-basic-duration) var(--transition-basic-timing-function)
      opacity 0.2s,
    var(--transition-basic-duration) var(--transition-basic-timing-function)
      transform 0.2s;
  transform: translateX(-10px);
}

.block-primary-menu ul.menu > li:hover ul.sub-menu {
  height: auto;
  opacity: 1;
  transform: translateX(0px);
  padding-bottom: 2rem;
}

.block-primary-menu ul.sub-menu > li {
  display: flex;
  justify-content: stretch;
  align-items: center;
  font-size: var(--font-size-sous-menu-principal);
}

.block-primary-menu ul.sub-menu > li > a {
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  padding: var(--submenu-padding);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  line-height: 1.1;
}

.block-primary-menu ul.sub-menu > li > a:hover {
  background: var(--couleur-liens);
  color: var(--couleur-fond);
}

/*****************/
/* Header Mobile */
/*****************/

#header-mobile {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 101;
  background: var(--couleur-fond);
  user-select: none;
  border-bottom: 1px solid #000;
  display: none;
}

body.admin-bar #header-mobile {
  top: 32px;
}

/* Tablettes et Smartphones */
@media (max-width: 991px) {
  body.admin-bar #header-mobile {
    top: 0;
  }
}

#container-header-mobile {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

#container-header-mobile > * {
  display: flex;
  flex: var(--header-menu-flex-boutons);
  align-items: center;
  justify-content: center;
}

#container-header-mobile .picto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#container-header-mobile .picto > svg {
  height: 25px;
  width: auto;
  fill: var(--couleur-texte);
}

#container-header-mobile .picto:focus > svg,
#container-header-mobile .picto:active > svg,
#container-header-mobile .picto:hover > svg {
  fill: var(--couleur-liens-hover);
}

#container-header-mobile > .container-header-mobile-logo {
  position: relative;
  align-items: center;
  flex: var(--header-menu-flex-logo);
}

.container-header-mobile-logo .logo-mobile {
  display: flex;
  width: 100%;
  height: 90%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

/********************************/
/* Header Container Menu Mobile */
/********************************/

#container-header-mobile > .container-header-mobile-menu {
  max-width: 60px;
  height: 60px;
  margin-right: 2vw;
}

#burger-button {
  cursor: pointer;
  display: flex;
}

#burger-button > svg {
  width: 100%;
  height: 100%;
}

/* Animation de base pour le bouton burger */

#burger-button > svg .line {
  fill: none;
  stroke: black;
  stroke-width: 6;
  transition:
    stroke-dasharray 400ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

#burger-button > svg .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

#burger-button > svg .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

#burger-button > svg .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

#burger-button.active > svg .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

#burger-button.active > svg .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

#burger-button.active > svg .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

/* Fin Animation de base pour le bouton burger */

#container-menu-mobile {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: auto;
  user-select: none;
  background: var(--couleur-fond);
  transform: translateX(-100%);
  transition: var(--transition-basic);
}

body.admin-bar #container-menu-mobile {
  margin-top: 32px;
}

/* Tablettes et Smartphones */
@media (max-width: 991px) {
  body.admin-bar #container-menu-mobile {
    margin-top: 0;
  }
}

#container-menu-mobile.active {
  transform: translateX(0%);
}

#container-menu-mobile > * {
  position: relative;
  padding-left: var(--burger-menu-padding-left);
  padding-right: var(--burger-menu-padding-right);
}

#container-menu-mobile > *:first-child {
  padding-top: var(--burger-menu-padding-top);
}

#container-menu-mobile > *:last-child {
  padding-bottom: var(--burger-menu-padding-bottom);
}

/********************************/
/* Menu Mobile                  */
/********************************/

#container-menu-mobile .container-menu .menu > li > a {
  font-size: var(--font-size-menu-principal);
}

#container-menu-mobile .container-menu .menu > li + li {
  margin-top: 1rem;
}

#container-menu-mobile .container-menu .sub-menu {
  margin-top: 0.75rem;
  padding-left: 1rem;
}

#container-menu-mobile .container-menu .sub-menu > li > a {
  font-size: var(--font-size-sous-menu-principal);
  padding: 0.5rem 0;
  display: block;
}

#container-menu-mobile .container-menu .sub-menu > li + li {
  margin-top: 0.25rem;
}

/***************************************************************************/
/* Extrait article                                                         */
/***************************************************************************/

*:has(article.post-extrait) {
  gap: 2vw;
}

article.post-extrait {
  display: flex;
}

article.post-extrait > .post-content {
  display: flex;
  flex-direction: column;
}

article.post-extrait > * + .post-content {
  margin-left: 2rem;
}

article.post-extrait .post-thumbnail {
  position: relative;
}

article.post-extrait .post-thumbnail a {
  display: block;
  line-height: 0;
}

article.post-extrait .post-thumbnail img {
  width: 100%;
  height: auto;
}

article.post-extrait h2 {
  margin-bottom: 1rem;
}

article.post-extrait .entry-excerpt {
  font-size: var(--font-size-medium);
}

/* Affichage en grille */
.display-grid > article.post-extrait {
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.display-grid > article.post-extrait > * + .post-content {
  margin-left: 0;
}

.display-grid > article.post-extrait + article.post-extrait {
  margin-top: 0;
}

.display-grid article.post-extrait h2 {
  font-size: var(--font-size-large);
}

/***************************************************************************/
/* Post metas                                                              */
/***************************************************************************/

.entry-meta {
  display: flex;
  align-items: center;
  user-select: none;
  margin-bottom: 1rem;
  font-size: var(--font-size-small);
  line-height: 1;
  flex-wrap: wrap;
  line-height: 1.2;
}

.entry-meta > * {
  display: flex;
  align-items: center;
}

.entry-meta > * + *:before,
.entry-meta ul li + li:before {
  content: "|";
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.post-extrait .entry-meta > * + *:before,
.post-extrait .entry-meta ul li + li:before {
  content: "|";
  margin-left: 0.4rem;
  margin-right: 0.4rem;
}

.entry-meta ul {
  display: inline-flex;
}

/***************************************************************************/
/* Contenu article                                                         */
/***************************************************************************/

.post-thumbnail .simpleParallax {
  width: 100%;
}

.thumbnail__voile {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 5;
}

body.single .post-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: var(--contentSize);
  margin: 0 auto 2rem auto;
}

body.single .post-thumbnail img {
  width: 100%;
  height: auto;
}

body.single .container-metas {
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 1rem;
  margin-bottom: 2rem;
}

/***************************************************************************/
/* Articles liés                                                           */
/***************************************************************************/

.related-posts h3 {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

body.single .related-posts .post-thumbnail {
  margin-bottom: 0.25rem;
}

/***************************************************************************/
/* Flèche de remontée                                                     */
/***************************************************************************/

a#arrow-up {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 9vh;
  width: var(--arrow-up-width);
  height: var(--arrow-up-width);
  border-radius: 50%;
  z-index: 50;
  transition: var(--transition-basic);
  filter: drop-shadow(0 0 1px var(--couleur-fond));
}

a#arrow-up svg {
  width: calc(var(--arrow-up-width) * 0.6);
  height: auto;
  transition: var(--transition-basic);
  fill: var(--couleur-liens);
}

a#arrow-up.droite {
  right: 1vw;
  transform: translateX(calc(100% + 1vw));
}

a#arrow-up.gauche {
  left: 1vw;
  transform: translateX(calc(-100% - 1vw));
}

a#arrow-up.active {
  transform: translateX(0);
}

a#arrow-up:hover {
  transform: translate(0, -0.5rem);
}

a#arrow-up:hover svg {
  fill: var(--couleur-liens-hover);
}

/***************************************************************************/
/* Formulaire de rechercher                                                              */
/***************************************************************************/

#search-form {
  position: fixed;
  top: 0vh;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

#search-form.visible {
  display: flex;
  transition: 0.25s all ease;
  transform: scale(1.1);
  cursor: pointer;
}

#search-form.active {
  transform: scale(1);
  opacity: 1;
  transition: 0.5s all ease;
}

body.admin-bar #search-form {
  top: 32px;
}

form.search-form {
  width: 50vw;
  display: flex;
  padding: 2rem;
  cursor: default;
}

form.search-form > * {
  flex: 1;
}

form.search-form > input[type="submit"] {
  flex: 0.3;
  margin-left: 0.25rem;
  padding: 1rem;
  font-size: var(--font-size-large);
}

form.search-form input[type="search"] {
  width: 100%;
  padding: 1rem;
  font-size: var(--font-size-large);
}

/***************************************************************************/
/* Pagination                                                              */
/***************************************************************************/

.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  padding: 0 1rem 2rem 1rem;
  width: 100%;
}

.page-numbers li + li {
  margin-left: 0.75rem;
}

.page-numbers a,
.page-numbers span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  font-size: var(--font-size-medium);
}

.page-numbers .current,
.page-numbers a {
  color: var(--couleur-texte);
  border: 1px solid var(--couleur-texte);
}

.page-numbers a:hover,
.page-numbers .current {
  background: var(--couleur-liens-hover);
  color: var(--couleur-liens);
}

.page-numbers a.prev,
.page-numbers a.next {
  background: none;
  border: none;
}

.page-numbers a.prev svg,
.page-numbers a.next svg {
  height: 25px;
  width: auto;
  transition: var(--transition-basic);
  fill: var(--couleur-liens);
}

.page-numbers a.prev:hover svg,
.page-numbers a.next:hover svg {
  fill: var(--couleur-liens-hover);
}

nav.suiv-prec {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

nav.suiv-prec:has([rel="prev"]) {
  justify-content: space-between;
}

nav.suiv-prec a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.suiv-prec a[rel="prev"] {
  text-align: right;
}

nav.suiv-prec a[rel="next"] {
  flex-direction: row-reverse;
}

nav.suiv-prec a svg {
  width: auto;
  height: 45px;
  fill: var(--couleur-liens);
  transition: var(--transition-basic);
  z-index: 30;
}

nav.suiv-prec a:hover svg {
  fill: var(--couleur-liens-hover);
}

nav.suiv-prec a[rel="prev"] svg {
  margin-right: 1rem;
}

nav.suiv-prec a[rel="prev"]:hover svg {
  transform: translateX(-0.5vw);
}

nav.suiv-prec a[rel="next"] svg {
  margin-left: 1rem;
}

nav.suiv-prec a[rel="next"]:hover svg {
  transform: translateX(0.5vw);
}

nav.suiv-prec a > span {
  display: flex;
  flex-direction: column;
}

nav.suiv-prec a > span .indication {
  font-size: var(--font-size-large);
  font-weight: bold;
}

nav.suiv-prec a > span .titre {
  font-size: var(--font-size-small);
}

nav.suiv-prec + .related-posts {
  margin-top: 15vh;
}

/****************/
/* Commentaires */
/****************/

.comments-area {
  border-top: 1px solid #ccc;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

h2.comments-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  font-size: var(--font-size-x-large);
  font-weight: 100;
  position: relative;
  padding-left: 4rem;
  user-select: none;
}

h2.comments-title .article-title {
  font-size: 0.8em;
  font-weight: 100;
  color: var(--couleur-liens);
}

.picto-commentaire {
  height: 30px;
  width: auto;
  display: block;
  margin-right: 1rem;
  position: absolute;
  left: 0;
  top: 0;
}

.picto-commentaire svg {
  height: 100%;
  width: auto;
  fill: #696969;
}

.comments {
  font-size: var(--font-size-medium);
}

.comment-list,
.comment-list ol.children {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-list ol.children {
  margin-top: 1rem;
  background: rgba(0, 0, 0, 0.03);
}

.comment {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1.5rem;
  border-left: 2px solid var(--couleur-liens);
  padding-left: 1.5rem;
}

.comment-list ol.children .comment {
  padding-top: 1rem;
}

.comment-content {
  overflow: hidden;
}

.comment-author {
  display: block;
  font-weight: bold;
  font-size: var(--font-size-large);
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.commentmetadata {
  margin-bottom: 0.5rem;
}

.commentmetadata a {
  font-style: italic;
  color: #888;
  font-size: 14px;
}

.comment-text {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.comment-reply-link {
  background: var(--couleur-liens);
  color: #fff;
  text-transform: uppercase;
  font-weight: 100;
  padding: 0.3rem 0.5rem;
  font-size: var(--font-size-small);
  border-radius: var(--arrondi-bouton-small);
}

.comment-form {
  margin-top: 1rem;
}

.comment-respond {
  margin-top: 30px;
}

.comment-respond h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.comment-respond p {
  font-size: 16px;
  margin-bottom: 20px;
}

.comment-respond form {
  max-width: 600px;
}

/***************************************************************************/
/* Résultats de recherche                                                  */
/***************************************************************************/

.resultat-recherche + .resultat-recherche {
  margin-top: 3rem;
}

.resultat-recherche > .fft-post-type {
  display: block;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #ccc;
  line-height: 1;
  font-weight: 300;
  user-select: none;
}

/***************************************************************************/
/* Post protégé par mot de passe                                           */
/***************************************************************************/

.post-password-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: var(--arrondi-small);
  border: 1px solid var(--couleur-1);
  padding: 5rem 1rem;
}

/***************************************************************************/
/* Blocs génériques                                                        */
/***************************************************************************/

.block-reseaux-sociaux > ul {
  display: flex;
}

.block-reseaux-sociaux > ul > li + li {
  margin-left: 0.25rem;
}

.block-reseaux-sociaux > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  padding: 0.25rem;
}

.block-reseaux-sociaux > ul > li > a > svg {
  width: 85%;
  height: auto;
  transition: var(--transition-basic);
  fill: var(--couleur-texte);
}

.block-reseaux-sociaux > ul > li:hover > a > svg {
  fill: var(--couleur-liens);
}

.block-reseaux-sociaux > ul > li > a > span {
  display: flex;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/******Apparition progressive des images**************/
/* Image with 'data' attribute is hidden */
img[data-lazy-src],
*.rocket-lazyload {
  /* we set the opacity to 0 */
  opacity: 0;
}
/* Image without 'data' attribute is (or becomes) visible */

*.rocket-lazyload[data-ll-status="loaded"],
img.lazyloaded {
  /* prepare the future animation */
  transition: all 0.3s linear;
  /* we set the opacity to 1 to do the magic */
  opacity: 1;
}

/******Apparition progressive des images en parallaxe**************/
/* Image with 'data' attribute is hidden */
figure:has(img[data-lazy-src].has-parallax) {
  /* we set the opacity to 0 */
  opacity: 0;
}
/* Image without 'data' attribute is (or becomes) visible */
figure:has(img.lazyloaded.has-parallax) {
  /* prepare the future animation */
  transition: opacity 0.5s linear;
  /* we set the opacity to 1 to do the magic */
  opacity: 1;
}