/*
Theme Name: Marinella
Template: bluehost-blueprint
Author: Baptiste
Description: Thème réalisé pour Marin'ella, à partir du thème Bluehost Blueprint
*/

/***************************
Général
***************************/
:root {
  --violet-deep: #8102df;
  --violet-medium: #a88aee;
  --violet-light: #dad1f6;
  --yellow: #fffeec;
  --orange: #ff5732;
  --green-lime: #cad83b;
  --green-dark: #216663;
}

/***************************
Utilitaires
***************************/
/* Permet de retirer le souligné d'un lien */
.no-underline,
.no-underline a {
  text-decoration: none !important;
}

/***************************
Header
***************************/
/* Gère le style pour pouvoir mettre en sticky le header (Réglage "Emplacement" dans la composition du Header) */
header.wp-block-template-part:has(.is-position-sticky) {
  position: sticky;
  top: 0;
  z-index: 100;
  container-type: scroll-state;
  /* Indispensable pour l'écouteur d'état pour déclencher l'apparition de l'ombre */
}

header.wp-block-template-part:has(.is-position-sticky)::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: none;
  transition: box-shadow 0.2s ease-in-out;
  pointer-events: none;
}

@container scroll-state(stuck: top) {
  header.wp-block-template-part:has(.is-position-sticky)::before {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  }
}

/***************************
Menu
***************************/
/* Mise en surbrillance du lien de réservation dans le menu */
.wp-block-navigation .wp-block-navigation-item.btn-reserver-menu .wp-block-navigation-item__content {
  background: var(--violet-deep);
  padding: 8px 16px;
  border-radius: 8px;
  color: #FFF;
  cursor: pointer;
}

.wp-block-navigation .wp-block-navigation-item.btn-reserver-menu .wp-block-navigation-item__content:hover {
  background: #6001a8;
  color: #FFF;
  text-decoration: none;
}

/* Souligne la page actuelle dans le menu */
.current-menu-item a {
  text-decoration: underline;
}

/***************************
Page d'Accueil
***************************/
/* Retire le titre sur la page d'accueil */
.home .wp-block-post-title {
  display: none;
}

/***************************
Calendrier - Plugin The Event Calendar (T.E.C.)
***************************/
/* Ajuste le mode d'affichage des bordures du tableau du mois */
table.tribe-events-calendar-month {
  border-collapse: collapse;
}

/* Met une moins grande opacité sur les jours passés pour mieux distinguer la date actuelle */
.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date {
  opacity: 0.4;
}

/* Fixe un bug de couleur du texte sur le bouton du jour actuel */
.tribe-events .datepicker .day.current {
  color: var(--tec-color-background);
}

/* Désactive le lien clicable sur les jours du calendrier 
(sinon ça ouvre une liste dont on ne peut plus sortir et le détail des évènement se met dans une iframe) */
.tribe-events .tribe-events-calendar-month__day-date-link {
  pointer-events: none;
}

/* Ajuste le style du bouton pour le moi actuel */
.tribe-common .tribe-common-c-btn-border-small,
.tribe-common a.tribe-common-c-btn-border-small,
.tribe-common .tribe-common-c-btn-border-small,
.tribe-common a.tribe-common-c-btn-border-small:hover {
  background-color: var(--yellow);
  border: 1px solid var(--violet-deep);
  color: var(--violet-deep) !important;
}

/* Ajuste le style de la flèche du mois suivant/précédent quand elle est désactivée */
.tribe-events .tribe-common-c-btn-icon--caret-right:disabled.tribe-events-c-top-bar__nav-link--next .tribe-common-c-btn-icon__icon-svg path,
.tribe-events .tribe-common-c-btn-icon--caret-left:disabled.tribe-events-c-top-bar__nav-link--prev .tribe-common-c-btn-icon__icon-svg path {
  fill: var(--tec-color-icon-disabled);
}

/* Ajuste le border raiud des évènements sur plusieurs jours */
.tribe-events .tribe-events-calendar-month__multiday-event--end .tribe-events-calendar-month__multiday-event-bar {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.tribe-events .tribe-events-calendar-month__multiday-event--start .tribe-events-calendar-month__multiday-event-bar {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}

/* Met en surbrillance les évènement ponctuel de la même façon que les évènements sur plusieurs jours */
/*.tribe-events .tribe-events-calendar-month__calendar-event-title{
  background-color: var(--tec-color-background-primary-multiday);
  outline: 2px solid var(--tec-color-background-primary-multiday);
  border-radius: 4px;
}*/

/***************************
Formulaire - Plugin NinjaForms
***************************/
/* Responsive pour gérer plusieurs champs sur une ligne */
@media (max-width: 520px) {
  .nf-form-cont .one-half {
    width: 100%;
    margin-left: 0;
  }
}

/* Style des boutons submit pour correspondre avec le thème du site */
input[type="submit"].ninja-forms-field {
  background-color: var(--violet-deep);
  border-radius: 8px;
}

/* Border-radius de tous les champs */
textarea,
select,
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=reset],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
.select2-container .select2-selection--single {
  border-radius: 4px !important;
}

/***************************
FAQ
***************************/
/* Filtres de catégories */
.lespace-faq .faq-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.4rem;
}

.lespace-faq .faq-filter {
  font-weight: 400;
  font-size: 0.88rem;
  background: transparent;
  border: 1px solid var(--violet-deep);
  padding: 0.45rem 1.15rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.lespace-faq .faq-filter:hover {
  border-color: var(--violet-deep);
}

.lespace-faq .faq-filter.active {
  background: var(--violet-deep);
  border-color: var(--violet-deep);
  color: var(--yellow);
}

/* Items accordéon */
.lespace-faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.lespace-faq .faq-item {
  background: var(--violet-light);
  border: 1px solid var(--violet-medium);
  border-radius: 8px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.lespace-faq .faq-item.open {
  border-color: var(--violet-deep);
  box-shadow: 0 6px 20px rgba(195, 111, 76, 0.08);
}

.lespace-faq .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  padding: 1rem;
  font-weight: 600;
  font-size: 1.02rem;
}

.lespace-faq .faq-question .faq-tag {
  display: block;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--violet-deep);
  margin-bottom: 0.3rem;
}

.lespace-faq .faq-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--violet-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.25s ease, transform 0.35s ease;
}

.lespace-faq .faq-item.open .faq-icon {
  background: var(--violet-deep);
  transform: rotate(135deg);
}

.lespace-faq .faq-icon::before,
.lespace-faq .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--yellow);
  transition: background 0.25s ease;
}

.lespace-faq .faq-item.open .faq-icon::before,
.lespace-faq .faq-item.open .faq-icon::after {
  background: var(--yellow);
}

.lespace-faq .faq-icon::before {
  width: 13px;
  height: 1.6px;
}

.lespace-faq .faq-icon::after {
  width: 1.6px;
  height: 13px;
}

.lespace-faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.lespace-faq .faq-answer-inner {
  padding: 0 1rem 1rem;
  font-size: 1.03rem;
  line-height: 1.65;
}

.lespace-faq .faq-answer-inner ol,
.lespace-faq .faq-answer-inner ul {
  margin: 0.6rem 0 0;
  padding-left: 1.3rem;
}

.lespace-faq .faq-answer-inner li {
  margin-bottom: 0.35rem;
}

.lespace-faq .faq-answer-inner li ul {
  margin-top: 0.35rem;
}

.lespace-faq .faq-answer-inner p {
  margin: 0 0 0.5rem;
}

.lespace-faq .faq-answer-inner p:last-child {
  margin-bottom: 0;
}

.lespace-faq .faq-item[data-cat="reservation"] {
  display: block;
}

@media (max-width: 520px) {
  .lespace-faq .faq-question {
    font-size: 1.05rem;
    padding: 1rem 1.1rem;
  }
}

/***************************************************
Harmonisation de l'accordéon WordPress natif (core/accordion)
avec le style de l'accordéon personnalisé .lespace-faq
***************************************************/

/* ---- Item de l'accordéon (fond, bordure) ---- */
.wp-block-accordion .wp-block-accordion-item {
  background: var(--violet-light) !important;
  border: 1px solid var(--violet-medium) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-accordion .wp-block-accordion-item+.wp-block-accordion-item {
  margin-top: 0.85rem;
}

.wp-block-accordion .wp-block-accordion-item.is-open {
  border-color: var(--violet-deep) !important;
  box-shadow: 0 6px 20px rgba(195, 111, 76, 0.08);
}

/* ---- Titre / bouton de déclenchement ---- */
.wp-block-accordion .wp-block-accordion-heading__toggle {
  font-weight: 600;
  font-size: 1.02rem;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-title {
  font-weight: 600;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
  text-decoration: none;
}

/* ---- Icône (remplace le "+" natif par le rond violet à croix) ---- */
.wp-block-accordion .wp-block-accordion-heading__toggle-icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--violet-medium);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0;
  /* masque le glyphe "+" d'origine */
  transition: background 0.25s ease, transform 0.35s ease;
}

.wp-block-accordion .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon {
  background: var(--violet-deep);
  transform: rotate(135deg);
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion .wp-block-accordion-heading__toggle-icon::after {
  content: '';
  position: absolute;
  background: var(--violet-light);
  transition: background 0.25s ease;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon::before {
  width: 13px;
  height: 1.6px;
}

.wp-block-accordion .wp-block-accordion-heading__toggle-icon::after {
  width: 1.6px;
  height: 13px;
}

/* ---- Animation d'ouverture / fermeture ----
   Par défaut, le panneau WordPress utilise l'attribut natif
   [hidden] (display:none, ou content-visibility:hidden pour la
   valeur "until-found") : il apparaît/disparaît donc d'un coup.
   On neutralise ce comportement pour reprendre la même logique
   de transition en hauteur que .faq-answer. */
.wp-block-accordion .wp-block-accordion-panel {
  display: block !important;
  content-visibility: visible !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

.wp-block-accordion .wp-block-accordion-item.is-open .wp-block-accordion-panel {
  /* Valeur volontairement large : ajustez-la si un contenu de panneau
     dépasse 3000px de haut (ex. beaucoup d'images), sinon la fin de la
     transition n'est pas visible mais l'ouverture reste fluide. */
  max-height: 3000px;
  opacity: 1;
}

/* ---- Contenu du panneau ---- */
.wp-block-accordion .wp-block-accordion-panel {
  font-size: 1.03rem;
  line-height: 1.65;
}

.wp-block-accordion .wp-block-accordion-panel ul,
.wp-block-accordion .wp-block-accordion-panel ol {
  margin: 0.6rem 0 0;
  padding-left: 1.3rem;
}

.wp-block-accordion .wp-block-accordion-panel li {
  margin-bottom: 0.35rem;
}

.wp-block-accordion .wp-block-accordion-panel p:last-child {
  margin-bottom: 0;
}

/* ---- Responsive ---- */
@media (max-width: 520px) {
  .wp-block-accordion .wp-block-accordion-heading__toggle {
    font-size: 1.05rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}