
/*@font-face {
    font-family: 'Brixton';
    src: url('Brixton-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/

@font-face {
    font-family: 'Brixton Sans TC';
    src: url('css/brixton-sans-tc-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

p {
  font-family: "Montserrat", sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Brixton Sans TC' !important;
  font-style: normal;
}

.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.brixton {
  /*font-family: "Brixton", sans-serif;*/
   font-family: 'Brixton Sans TC';
  /*font-weight: 400;*/
  font-style: normal;
}

.windsong-regular {
  font-family: "WindSong", cursive;
  font-weight: 400;
  font-style: normal;
}

.windsong-medium {
  font-family: "WindSong", cursive;
  font-weight: 500;
  font-style: normal;
}


.bg-jaune{
	background-color: #FFF5BA !important
}

.bg-saumon{
	background-color: #FFE6D8 !important
}

.bg-rose{
	background-color: #FADADD !important
}

.bg-beige{
	background-color: #F5E9DC !important
}

.bg-gris{
	background-color: #ECECEC !important
}

.bg-vert-eau{
	background-color: #A8DADC !important
}

.bg-vert-f{
	background-color: #A8E6CF !important
}

.bg-peche{
	background-color: #FFDDD2 !important
}

.bg-vert-c{
	background-color: #F1FAEE !important
}

.bg-violet{
	background-color: #E5E5F9 !important
}

.bg-image {
  background-image: url('fond.jpg'); /* Remplacez par l'URL de votre image */
  background-size: cover;
  background-position: center;
  height: 100vh; /* Prend toute la hauteur de l'écran */
}
.overlay {
  background: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
  /*color: #fff;*/
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-black{
	color: #000 !important;
}
.navbar-brand img {
  width: 40%;
}
.btn-custom {
  background-color: #FADADD; /* Couleur du bouton */
  color: #000;
  border-color: #FADADD; 
  border-width: 2px;
  border-radius: 0px; /* Coins arrondis */
}

.btn-custom:hover {
  background-color: transparent; /* Couleur du bouton */
  color: #000;
  border-color: #FADADD; 
  border-width: 2px;
  border-radius: 0px ; /* Coins arrondis */
}

.btn{
	border-radius: 0px !important;
}

a {
  color: black; /* Définit la couleur du lien en noir */
  text-decoration: none; /* Retire le soulignement par défaut */
}

a:hover {
	color: gray;
  text-decoration: underline; /* Ajoute un soulignement au survol pour indiquer que c'est cliquable */
}

.btn-outline-violet{
	color: black;
	background-color: #E5E5F9;
    border-color: #E5E5F9;
}


.btn-outline-peche{
	color: black;
	background-color: #FFDDD2;
    border-color: #FFDDD2;
}

.btn-custom-peche {
  background-color: #FFDDD2; /* Couleur du bouton */
  color: #000;
  border-color: #FFDDD2; 
  border-width: 2px;
  border-radius: 0px; /* Coins arrondis */
}

.btn-custom-peche:hover {
  background-color: transparent; /* Couleur du bouton */
  color: #000;
  border-color: #FFDDD2; 
  border-width: 2px;
  border-radius: 0px ; /* Coins arrondis */
}

   /* Conteneur qui contient les deux images */
    .image-container {
      position: relative; /* Position relative pour positionner les enfants */
      width: 100%; /* Largeur du conteneur */
      height: 100%; /* Hauteur du conteneur */
    }

    /* Image de fond (la première image) */
    .background-image {
      /*position: absolute;*/
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ajuste l'image pour couvrir entièrement */
    }

    /* Image au-dessus (la seconde image) */
    .foreground-image {
      position: absolute;
      /*top: 50%;  Positionne au centre verticalement */
      left: 60%;
      /*right: 0%;*/
      transform: translate(-50%, -50%); /* Centre parfaitement l'image */
      width: 150px; /* Largeur de l'image au-dessus */
      height: auto; /* Conserve le ratio de l'image */
      z-index: 2; /* Assure que cette image soit au-dessus de l'autre */
    }



.bg-or{
  background-color: #E8C161 !important
}

.bg-beige-2{
  background-color: #F4E3C1 !important
}

.bg-gris-2{
  background-color: #ECECEC !important
}

.bg-bleu-c{
  background-color: #B0C7DF !important
}

.bg-bleu-f{
  background-color: #260C66 !important
}

.btn-outline-or{
  color: black;
  background-color: #E8C161;
    border-color: #E8C161;
}



.btn-outline-bleu-f{
  color: black;
  background-color: #260C66;
  border-color: #260C66;
}

.btn-custom-bleu-f {
  background-color: #260C66; /* Couleur du bouton */
  color: #fff;
  border-color: #260C66; 
  border-width: 2px;
  border-radius: 0px; /* Coins arrondis */
}

.btn-custom-bleu-f:hover {
  background-color: transparent; /* Couleur du bouton */
  color: #260C66;
  border-color: #260C66; 
  border-width: 2px;
  border-radius: 0px ; /* Coins arrondis */
}


#menu-item-216 {
  background-color: #260C66; /* Couleur du bouton */
  color: #fff;
  border-color: #260C66; 
  border-width: 2px;
  border-radius: 0px; /* Coins arrondis */
}

#menu-item-216:hover {
  background-color: transparent; /* Couleur du bouton */
  color: #260C66;
  border-color: #260C66; 
  border-width: 2px;
  border-radius: 0px ; /* Coins arrondis */
}


/* Appliquer un style spécifique à un élément du menu */
.menu-item-216 a {
  background-color: #260C66;
  color: white !important;
  /*border-radius: 5px;*/
  padding: 8px 12px;
  transition: background-color 0.3s;
  border: 2px solid #260C66
}

.menu-item-216 a:hover {
  background-color: #fff;
  color: #260C66;
  border: 2px solid #260C66
}

.menu-item-216 a {
  display: inline-block;
  text-decoration: none;
  /*font-weight: bold;*/
}

.navbar-brand:hover{
  text-decoration: none !important;
}


  video::cue {
    font-size: 150%;
  }
  video {
    height: 100%;
    width: 100%;
  }

.wp-block-columns-is-layout-flex{
  gap: 0em !important;
}


@media (max-width: 991.98px) {
  .dropdown-menu a {
    display: block !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  .dropdown-menu {
    max-width: 100vw !important;
    box-sizing: border-box;
    padding: 0.2rem 1rem;
  }
}

/* CACHE le contenu .desktop-only sur mobile */
@media screen and (max-width: 991.98px) {
  .desktop-only {
    display: none !important;
  }
}

/* CACHE le contenu .mobile-only sur desktop */
@media screen and (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
}




.btn-outline-orange{
  color: black;
  background-color: #eb8c0a;
    border-color: #eb8c0a;
}

.btn-custom-bleu-f-vif {
  background-color: #92b5ed; /* Couleur du bouton */
  color: #fff;
  border-color: #92b5ed; 
  border-width: 2px;
  border-radius: 0px; /* Coins arrondis */
}

.btn-custom-bleu-f-vif:hover {
  background-color: transparent; /* Couleur du bouton */
  color: #000;
  border-color: #92b5ed; 
  border-width: 2px;
  border-radius: 0px ; /* Coins arrondis */
}


.wp-block-button .wp-block-button__link:hover,
.wp-block-button a:hover {
  text-decoration: none;
    color: black;
  /*background-color: #E8C161;*/
    border-color: #E8C161 !important;
}


.row.row-cols-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}


#therapies .row > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#therapies .image-wrapper {
  height: 100px; /* ou ajustable selon le style souhaité */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Rend chaque colonne de la grille égale */
#therapies .tool-block {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

/* Structure interne avec même hauteur */
#therapies .tool-inner {
  height: 100%;
}

/* Hauteurs fixes pour alignement parfait */
#therapies .tool-title {
  min-height: 3.5rem; /* Ajuste selon la taille moyenne de tes titres */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#therapies .tool-image {
  width: 60px;
  height: auto;
  margin: 1rem 0;
}

#therapies .tool-text {
  min-height: 1rem; /* Ajuste selon la hauteur moyenne du texte */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
}



.wp-block-image .alignright {
    float: right;
    margin: 0em !important;
}