/*!
Theme Name: Kadence
Theme URI: https://www.kadencewp.com/kadence-theme/
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Version: 1.2.25
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence
Requires at least: 6.3
Tested up to: 6.8.1
Tags: translation-ready, two-columns, right-sidebar, left-sidebar, footer-widgets, blog, custom-logo, custom-background, custom-menu, rtl-language-support, editor-style, threaded-comments, custom-colors, featured-images, wide-blocks, full-width-template, theme-options, e-commerce
Requires PHP: 7.4

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

body {
  background-color: #e1efd1;
}

p, li {
  max-width: 80ch;
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Animation pour le logo */
@keyframes slideInLogo {
  0% {
    transform: translateX(-100vw);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Appliquer l'animation */
.site-branding {
  animation: slideInLogo 1.5s ease;
}

/* Mise en forme des titres dans les content view d'articles */
.pt-cv-view .pt-cv-content h1,
.pt-cv-view .pt-cv-content h2,
.pt-cv-view .pt-cv-content h3 {
  font-family: "Nunito", sans-serif;
  font-weight: 600; /* Demi-gras */
}

/* Mise en forme du titre de l'article dans Content Views */
.pt-cv-view .pt-cv-title a {
  font-family: "Nunito", sans-serif; /* Police personnalisée */
  font-weight: 600; /* Demi-gras */
  font-size: 32px; /* Taille du texte */
  color: #5381b4;
}

.pt-cv-view .pt-cv-title a:hover {
  color: #3593E3;
}

/* Par défaut, cacher les articles (section-article) */
.section-article {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.5s ease, opacity;
}

/* Quand la section-article est ouverte, la rendre visible */
.section-article.open {
  position: relative; /* L’article revient dans le flux */
  opacity: 1;
  visibility: visible;
}

/* Couleur arrière plan du header sticky */
.site-header-inner-wrap.item-is-stuck {
  background: linear-gradient(
      90deg,
      rgba(0, 255, 255, 0.3) 0%,
      rgba(250, 183, 0, 0.5) 100%
    ),
  rgba(255, 255, 255, 1) !important;  /* Fond blanc opaque */
}

/* .site-header-inner-wrap.item-is-stuck {
  background: linear-gradient(
      90deg,
      rgba(255, 0, 0, 0.5) 0%,
      rgba(255, 194, 0, 0.5) 100%
    ),
  rgba(255, 255, 255, 1) !important;
} */

/* bordures englobantes des titre h1 */
h1 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: x-large !important;
  /* background: radial-gradient( circle farthest-corner at center center,
  rgba(84, 130, 181, 1) 5%, 
  rgba(150, 193, 33 ,1) 20%,
  rgb(230, 97, 12, 1) 20%
  );
  background-clip: text;
  color: transparent; */
}

h1:not(.no-border)::before,
h1:not(.no-border)::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #000; /* Couleur de la bordure */
  margin: 0 10px; /* Espace entre le texte et les bordures */
}
h1.white:not(.no-border)::before,
h1.white:not(.no-border)::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #FFF; /* Couleur de la bordure */
  margin: 0 10px; /* Espace entre le texte et les bordures */
}

/* Media query pour les écrans plus petits */
@media (max-width: 768px) {
  h1:not(.no-border)::before,
  h1:not(.no-border)::after {
    margin: 0 5px; /* Réduire l'espace sur mobile */
  }
}

/* Personalisation du bloc video */
.kadence-video-popup-wrap.kadence-video-noshadow {
  max-height: 400px;
  border-radius: 30px;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5);
}

.kadence-video-intrinsic ::after {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: small;
  color: #e6e6e6;
  content: attr(aria-label);
  position: absolute;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: rgba(0, 0, 0, 0.3);
  padding: 0 .5rem;
}

.kadence-video-overlay {
  opacity: 0 !important;
  transition: opacity 0.3s ease;
}

.kadence-video-intrinsic:hover .kadence-video-overlay {
  opacity: 0.3 !important;
}


/* Boutons action en-tête  */
.header-html-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.donation {
  background-color: #000;
  box-shadow: 4px 4px 4px -4px rgba(0, 0, 0, 0.5);
  color: white !important;
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-weight: bold;
  font-size: 15px;
  text-decoration: none !important;
  padding: 4px 10px;
  border-radius: 30px;
}

.volunteer {
  background-color: #000;
  box-shadow: 4px 4px 4px -4px rgba(0, 0, 0, 0.5);
  color: white !important;
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-weight: bold;
  text-decoration: none !important;
  font-size: 15px;
  padding: 4px 10px;
  border-radius: 30px;
}

.donation:hover {
  background-color: rgb(255, 255, 255);
  box-shadow: none;
  color: black !important;
}

.volunteer:hover {
  background-color: rgb(255, 255, 255);
  box-shadow: none;
  color: black !important;
}

/* Formulaire de contact (Mise en forme)*/
.contact-form {
  border-radius: 30px;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
}


/* Mise en forme de la carte google territoire d'intervention */
#contact-map {
  /* height: 400px !important; */
  border-radius: 30px;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
  /* height: auto; */
}

/* Fiche contact phone */
.phone-call {
  z-index: 1;
}

/* Mise en forme légende carte google territoire d'intervention */
/* .wp-block-kadence-column.kadence-column5_b0d450-45 {
  border: 1px solid red;
} */

aside {
  padding: 10% 10px 0 0;
  display: flex;
  flex-direction: column;
  background: rgb(255, 255, 255);
  min-height: 600px;
  max-height: 600px;
  border-radius: 30px;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Première colonne pour les icônes, deuxième pour le texte */
.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.grid-container {
  padding: 0 0 0 20px;
}
/* 
  Utilisation de display: contents pour permettre aux enfants des <li> 
  (comme .icon et .text) de participer directement à la grille définie 
  par .grid-container. Cela supprime les propriétés de bloc des <li>, 
  tout en conservant la sémantique de la liste. 
  Permet d'aligner les enfants sur une grille sans casser la mise en page.
*/
.grid-container li {
  display: contents; 
}

.grid-container .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.grid-container .text {
  display: flex;
  align-items: center;
}

.grid-container .text i {
  font-size: small;
}

#contact-card {
  position: absolute;
  inset: 80% 0 0 0;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 0 0 30px 30px;
}

#contact-card h2 {
color: white;
text-transform: uppercase;
font-size: 19.9px;
text-align: center;
letter-spacing: 4px;
padding-top: 10px;
}

.grid-phone {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem; /* Espacement entre les colonnes */
  list-style: none;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 1200px) {
  ul.grid-phone {
  padding: 0;
  margin: 0 auto 0 28%;
  }
}

.grid-phone li {
  display: contents; 
}

.grid-phone .phone-icon {
  display: flex;
  align-items: center;
  filter: invert(1);
  width: 16px;
}

.grid-phone .phone-text {
  display: flex;
  align-items: center;
}


/* Page Contact - Mise en forme conteneur text bénévole */

.kadence-column1350_6cee72-51 > .kt-inside-inner-col {
  position: relative;
  border-radius: 30px;
  overflow: hidden; /* Pas de flou au dela des bords */
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
}
/* Applique le flou */
/* .kadence-column1350_6cee72-51 > .kt-inside-inner-col:before {
  filter: blur(4px); 
} */

p.kt-adv-heading1350_52625d-ae.wp-block-kadence-advancedheading {
  display: flex;
  justify-content: center;
  align-items: end;
  border-radius: 0 0 30px 30px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 0 10px 20px 10px !important;
  position: absolute;
  inset: auto 0 0 0;
}


/* Mise en forme fenêtre d'information google map  */
.info-content > h3 {
  font-size: 20px;
}
.info-content > h4 {
  font-size: 15px;
  text-align: start;
}

.gm-ui-hover-effect {
  box-shadow: none;
}

.gm-ui-hover-effect:hover {
  box-shadow: none;
}

.info-content > phone {
  color: rebeccapurple;
  font-weight: bold;
}

.info-content > phone > svg {
  transform: translateY(4px);
}

.marker-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Propiétés icon équipe mobile */
.mobile-team-icon {
  position: relative;
  z-index: 5;
}

.map-label {
  position: absolute;
  z-index: 10;
  bottom: 20px; /* Ajuste la hauteur au-dessus de l'icône */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #FFF;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: inherit;
  pointer-events: none; /* Empêche les interactions avec la carte */
  opacity: 0; /* Caché par défaut */
  transition: opacity 0.2s ease-in-out;
}

/* Affiche le label uniquement au survol du conteneur */
.marker-container:hover .map-label {
  opacity: 1;
}

/* Afficher-Masquer les markers des équipes mobiles  */
#toggle-mobile-team {
  cursor: pointer;
}

#toggle-mobile-team.active {
    filter: grayscale(0) drop-shadow(0.15rem 0.1rem 0.2rem rgba(0, 0, 0, 0.6));
    opacity: 1;
}
#toggle-mobile-team:not(.active) {
    filter: grayscale(1);
    opacity: 0.5;
}


/* Champs de recherche Search field modal (drawer) */
#search-drawer .drawer-inner input.search-field {
  border-radius: 30px;
  font-size: 20px;
  border: 3px solid white;
}

/* Gestion de la modale Mentions Légales */
/* La Modale (arrière-plan) */
.modal {
  display: flex;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent dès le début */
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Classe active pour afficher la modale */
.modal.active {
  opacity: 1;
  visibility: visible;
}

/* En-tête Modale */
.modal-header {
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
  border-radius: 30px 30px 0 0;
  color: white;
  background: linear-gradient(
      45deg,
      rgba(0, 150, 255, 0.3) 0%,
      rgba(25, 255, 110, 0.3) 100%
    ),
    rgba(255, 255, 255, 1) !important;
}
.modal-header > h2 {
  font-size: 20px;
}

/* Contenu modale */
.modal-content {
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  background-color: white;
  border-radius: 30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  top: 300px; /* Position de départ hors écran */
  transition: top 0.5s ease-out; /* Transition fluide */
}

/* Quand la modale s'ouvre, elle remonte */
.modal-content.active {
  top: 0;
}

/* Corps Modale */
.modal-body {
  padding: 20px;
}
.modal-body > h3 {
  text-transform: uppercase;
  font-size: 18px;
}

/* Animation */
@keyframes animatebottom {
  from {
    top: 300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

/* Bouton Fermeture */
.close-mdl-btn {
  position: absolute;
  color: gray;
  top: 1px;
  right: 16px;
  font-size: 30px;
  cursor: pointer;
}

.close-mdl-btn:hover,
.close-mdl-btn:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Mode portrait sur mobile */
@media screen and (max-width: 768px) {
  .modal-content {
    margin-left: 16px;
    margin-right: 16px;
  }
  .modal {
    padding-top: 0;
  }
}

/* Gestion des dispositifs (cards) */
.dispo-card {
  position: relative; /* Nécessaire pour positionner le pseudo-élément */
  border-radius: 30px;
  padding: 10px;
  height: 400px;
  max-height: 400px;
  width: 100%;
  overflow: hidden; /* Empêche le débordement du pseudo-élément */
  box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.2);
  background: transparent; /* Fond par défaut transparent */
  z-index: 1; /* Assure que le contenu reste au-dessus */
}

.dispo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 0; /* Taille initiale */
  height: 100%;
  background: rgba(0, 0, 0, 0.1); /* Couleur de remplissage */
  transform: skewX(-45deg); /* Inclinaison pour un remplissage en diagonale */
  transform-origin: top left; /* Point d'origine pour le remplissage */
  transition: width 0.5s ease-in-out; /* Transition fluide */
  z-index: -1; /* Place le pseudo-élément derrière le contenu */
}

.dispo-card::after {
  content: "";
  position: absolute;
  inset: 85% 25% -1% 25%;
  background: url('/wp-content/uploads/2025/dispo-icons/touch.svg') no-repeat center/contain;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

.dispo-card:hover::after {
  opacity: 1;
}

.dispo-card:hover::before {
  width: 300%; /* Remplit toute la largeur en diagonale */
}

/*  Correction du scrollIntoView vers l'article ouvert par la carte */
.article-anchor {
  scroll-margin-top: calc(var(--scroll-margin) + 6rem);
}

/* Gestion boutons de articles (services & dispositifs) */

button.close-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 30px;
  background: black;
  color: white !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  padding: 5px 25px 5px 25px;
  box-shadow: 1px 5px 10px 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

button.close-btn:hover {
  box-shadow: 4px 4px 4px -4px rgba(255, 255, 255, 0.1);
  color: black;
  filter: invert(1);
}

button.close-btn > .svg-wrapper {
  padding: 2.5px 0 2.5px 0;
  animation: 0.5s ease-in-out infinite alternate bounce;
}

button.close-btn:hover > .svg-wrapper {
  animation: none;
}

button.close-btn > .svg-wrapper > svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

button.close-btn:hover > .svg-wrapper > svg {
  transform: translateY(-5px);
}

/* Button Icon Animation */
@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(5px);
  }
}

/* Logos partenaires */

.logos {
  overflow: hidden;
  margin-bottom: 2rem;
  white-space: nowrap;
  position: relative;
}

.logos:before,
.logos:after {
  position: absolute;
  top: 0;
  width: 100px;
  content: "";
  z-index: 2;
}

.logos {
  overflow: hidden;
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.logos:hover .logos-slide {
animation-play-state: paused;
}

.logos-slide {
  display: inline-flex;
  animation: slide 60s linear infinite;
  width: max-content;
  will-change: transform;
}

.logos-slide img {
  display: inline-block;
  width: 12rem;
  object-fit: contain;
  margin-left: 2rem;
  margin-right: 2rem;
  filter: drop-shadow(0.1rem 0.3rem 0.4rem rgba(0, 0, 0, 0.5));
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* Section "histoire" */

.ticket-wrapper {
  height: 260px;
  padding: 4rem 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  /* Masque combiné pour adoucir les bords sur les quatre côtés */
  -webkit-mask-image: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent),
                      linear-gradient(to right, transparent, white 10%, white 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent),
              linear-gradient(to right, transparent, white 10%, white 90%, transparent);
  /* Fusionner les masques */
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
  /* Scroll snapping */
  scroll-snap-type: y mandatory;
  /* scroll-padding: 3rem; */
}

/* Style de bordures de blocs infos */
span.kt-blocks-info-box-link-wrap.info-box-link.kt-blocks-info-box-media-align-top.kt-info-halign-center {
  border-radius: 30px;
  border: double 1px transparent;
  padding: 4px;
  background-image: linear-gradient(rgb(247 250 252), rgb(247 250 252)), linear-gradient(90deg, #5382b4, #96c121, #fecb04);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 4px 2px 6px 2px rgba(0, 0, 0, 0.3);
}
.phone-box {
  opacity: 0;
  transform: scale(0);
}
.phone-box.show {
  animation: phoneBounceIn 0.5s ease-in-out;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;

}
@keyframes phoneBounceIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.95);
  }
  85% {
    transform: scale(1.03);
  }
  92% {
    transform: scale(0.97);
  }
  97% {
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

  /* Selection, mise en forme et animations des blocs date/events de la page Histoire*/
.infobox-wrapper {
  display: flex;
  flex-direction: column;
  align-content: center;
  max-width: 800px;
  margin: auto;
  height: calc(3 * 13rem);
  padding: 2rem 2rem 4rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* Masque */
  mask: linear-gradient(to bottom, transparent, white 10%, white 90%, transparent),
  linear-gradient(to right, transparent, white 5%, white 95%, transparent);
  /* Fusionner les masques */
  mask-composite: intersect;
  /* Scroll snapping */
  scroll-snap-type: y mandatory;
  /* scroll-padding: auto; */
}
/* Désactive la vilaine scrollbar  */
.infobox-wrapper::-webkit-scrollbar {
  display: none;
}
.infobox-wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.infobox {
  width: 100%;
  min-height: 9rem;
  border-radius: 30px;
  border: double 1px transparent;
  padding: 4px;
  background-image: linear-gradient(white, white), linear-gradient(90deg, #5382b4, #96c121, #fecb04);
  background-origin: border-box;
  background-clip: content-box, border-box;
  box-shadow: 4px 2px 6px 2px rgba(0, 0, 0, 0.3);
  margin: 1rem 0;
  filter: blur(0.1rem);
  scale: 0.98;
  opacity: 0;
  transition: 
  opacity 0.3s ease-in-out,
  scale 0.5s ease-in-out, 
  filter 1s ease-in-out;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  }

  .infobox-textcontent {
    display: flex;
    flex-direction: column;
    padding: 0 1rem;
    text-align: center;
  }

  h4.info-box-title {
    font-weight: bold;
    font-size: x-large;
    margin: auto;
  }

  .infobox.in-view {
    filter: blur(0);
    scale: 1;
    opacity: 1;
  }

  /* Transition différente pour la disparition */
.infobox:not(.in-view) {
  transition: 
    opacity 1s ease-in-out,
    scale 0.3s ease-in-out, 
    filter 0.3s ease-in-out;
}


/* Justification des textes et listes des posts */
.postext span, .postext p {
  text-align: justify;
}

/* Mise en forme des titres en haut des posts (page principale) */
h2.pt-cv-title, div.pt-cv-taxoterm.above_title {
  text-align: end;
  font-variant: small-caps;
}
/* Mise en forme des titres en haut des posts (articles) */
h1.entry-title {
  font-variant: small-caps;
}

/* Animation des éléments du menu mobile  */
.drawer-header {
  background-color: #000;
}

#mobile-menu {
  overflow-x: hidden;
}

#mobile-menu li {
  font-weight: 800;
  font-variant: small-caps;
}

/* classe personalisée pour forcer la surbrillance lors de l'activation de l'article projet asso  */
/* Surlignage uniquement sur le menu desktop */
.main-navigation .primary-menu-container .menu-item.force-current-menu-item > a,
.main-navigation .primary-menu-container .menu-item.force-current-menu-item {
  background: rgba(0, 0, 0, 0.35);
  color: #60AFFF !important;
}

/* Pas de fond sur le menu mobile, juste la couleur du texte */
#mobile-menu .menu-item.force-current-menu-item > a,
#mobile-menu .menu-item.force-current-menu-item {
  color: #60AFFF !important;
}


/* Mise en page de la section remerciements partenaires */
.thanks-wrapper {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 30px;
  margin-left: 24px !important;
  margin-right: 24px !important;
  padding: 0 0 2rem 0;
}
/* couleur et position du quote sign décoratif */
.thanks blockquote::before {
  position: absolute;
  left: 0;
  top: 3rem;
  font-size: 10rem;
  color: #e6e6e6;
}

.thanks blockquote {
  position: relative;
  padding-left: 2rem;
}

.thanks blockquote p {
  padding-left: 1rem;
  text-align: justify;
}

.thanks-wrapper ul {
  padding-left: 5rem;
  padding-right: 1rem;
}

/* .thanks-wrapper li {
  text-align: justify;
} */


/* ** SECTION ACTUALITÉ ** Style card pour la boucle de requête WordPress  */
.wp-block-post {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.3);
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.2s, box-shadow 0.2s;
  will-change: transform;
}
.wp-block-post:hover {
  transform: translateY(-4px)scale(1.02);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
}

/* @media (max-width: 1023px) {
  .wp-block-post:hover {
    border: 2px solid white;
  }
} */

/* Image en background */
.wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  height: 100%;
}

.wp-block-post-featured-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 30px;
}

.post-text,
.post-text::before {
  pointer-events: none;
}

.post-text {
  position: relative;
  padding-top: .5rem;
}

.post-text::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  pointer-events: none;
}

.wp-block-post-title,
.wp-block-post-date {
  position: relative;
  color: #fff;
}

.wp-block-post-title {
  font-size: medium;
  margin: 0 !important;
}

.wp-block-post-date {
  font-size: x-small;
  margin-bottom: .5rem;
}

.wp-block-post-title,
.wp-block-post-date,
.wp-block-post-excerpt {
  padding: 0 0 0 1.5rem;
}

.publication .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 0;
  margin: 0;
}

/* Pour fonctionner correctement avec grid */
.publication .wp-block-post-template > li.wp-block-post {
  display: flex;
  width: 100%;
  margin: 0 auto;
}

/* Tablette : 2 colonnes */
@media (max-width: 1023px) {
  .publication .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile : 1 colonne */
@media (max-width: 600px) {
  .publication .wp-block-post-template {
    grid-template-columns: 1fr;
  }
  .publication .wp-block-post-template > li.wp-block-post {
    max-width: 100%;
  }
}

#article-content {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 100px;
}

.scroll-anchor {
  height: 1px;
  width: 100%;
  scroll-margin-top: var(--scroll-margin);
}

#article-content > article > h2 {
  font-variant: small-caps;
  text-align: center;
  margin: 0 0 16px;
}

/* Bouton de fermeture des articles */
.close-article-btn {
  display: block;
  margin: 24px auto 50px auto;
  position: sticky;
  top: calc(var(--scroll-margin) + 48px);
  z-index: 2;
  font-family: "Nunito", sans-serif !important;
  font-size: 15px;
  font-weight: 600;
  padding: 5px 25px 5px 25px;
  box-shadow: 1px 5px 10px 2px rgba(0, 0, 0, 0.5);
}

/* **NAVIGATION** */
[id] {
  scroll-margin-top: var(--scroll-margin);
}

/* Styles de la banière de cookies */
.cookie-banner-wrapper {
  position: fixed;
  bottom: 10%;
  left: 25vw;
  right: 25vw;
  margin: 0 24px 0 24px;
  border-radius: 30px;
  display: grid;
  grid-template-columns: 1fr;
  background: #222222e3;
  color: #fff;
  padding: 1em;
  gap: 1em;
  align-items: center;
  z-index: 1;
  opacity: 0;
  /* pointer-events: none; */
  transition: opacity 0.5s ease;
}

.cookie-banner-wrapper.visible {
  opacity: 1;
  pointer-events: auto;
}

.cookie-icon {
  width: 50px;
  justify-self: center;
}

.cookie-text {
  text-align: center;
  justify-self: center;
}

.cookie-link {
  justify-self: center;
}

#cookie-accept, #cookie-refuse {
  margin: 0 10% 0 10%;
}

@media screen and (max-width: 600px) {
  .cookie-banner-wrapper {
    left: 0;
    right: 0;
    bottom: 160px;
  }
}

@media screen and (orientation: landscape) and (max-height: 500px) {
  .cookie-banner-wrapper {
    left: 0;
    right: 0;
    bottom: 0;
    gap: 0;
  }
  #cookie-accept, #cookie-refuse {
  margin: 10px 25% 5px 25%;
}
.cookie-text {
  margin: 0;
}
.cookie-icon {
  width: 50px;
  justify-self: center;
  margin: 5px 0 5px 0;
}
}

#cookie-settings-btn {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 6px;
  left: 24px;
  z-index: 2;
  cursor:pointer;
  background: #222222d0;
  border-radius: 50px;
  width: 50px;
  height: 50px;
}