/*

 Theme Name:   Twenty Twenty-Five Child

 Theme URI:    https://example.com

 Description:  Thème enfant de Twenty Twenty-Five

 Author:       Votre nom

 Author URI:   https://example.com

 Template:     twentytwentyfive

 Version:      1.0.0

 Text Domain:  twentytwentyfive-child

*/

h1.elementor-heading-title span {
  color: #9c5fa0;
  font-style: italic;
  font-weight: bold;
}

a.custom-logo-link img {
  border-radius: 50%;
}

div.elementor-icon-wrapper .elementor-icon {
  border: none !important;
}

div.elementor-element-e55727f span {
  color: #c9a15a !important;
}

.elementor-element-3c0026f > .e-con {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.elementor-element-3c0026f > .e-con:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* optionnel : effet de profondeur */
}

/* Le conteneur doit être positionné pour que le pseudo-élément se cale sur lui */
.elementor-element-c928803,
.elementor-element-4fd3839,
.elementor-element-731fc9b {
  position: relative;
}

/* Pseudo-élément qui prend TOUTE la largeur de la fenêtre, peu importe
   les max-width des parents, et porte le fond à la place du conteneur */
.elementor-element-c928803::before,
.elementor-element-4fd3839::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background-color: #f0dce7;
}

.elementor-element-731fc9b::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background-color: #f5e4ec;
}

/* Le contenu doit rester au-dessus du pseudo-élément */
.elementor-element-c928803 > .e-con-inner {
  position: relative;
  z-index: 1;
}

.elementor-element-debb396 .e-con-inner > div {
  height: 70px;
}

/* .elementor-element-3a7040e {
  height: 50px;
} */
/* ==========================================================================
   Style personnalisé du formulaire WPForms
   ========================================================================== */

/* Conteneur / carte du formulaire */
.wpforms-container {
  /* WPForms fixe le fond via une variable CSS inline (--wpforms-background-color) :
       on l'écrase directement, en plus de background-color, pour être sûr. */
  --wpforms-background-color: #6b3f5cc2 !important;
  background-color: #6b3f5cc2 !important; /* mauve foncé, ajuste la teinte si besoin */
  border-radius: 20px !important;
  padding: 35px 30px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Espacement entre les champs */
.wpforms-container .wpforms-field {
  margin-bottom: 22px;
}

/* Labels (NOM, TÉLÉPHONE, MESSAGE...) */
.wpforms-container .wpforms-field-label {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

/* Astérisque des champs obligatoires */
.wpforms-container .wpforms-required-label {
  color: #e8c98a;
}

/* Champs texte, email, tel */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container textarea {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  width: 100% !important;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

/* Placeholder */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1;
}

/* Focus */
.wpforms-container input:focus,
.wpforms-container textarea:focus {
  background-color: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Textarea : hauteur + redimensionnement */
.wpforms-container textarea {
  min-height: 110px;
  resize: vertical;
}

/* Bouton d'envoi */
.wpforms-container .wpforms-submit-container {
  text-align: center;
  margin-top: 15px !important;
}

.wpforms-container button.wpforms-submit {
  background-color: #d9b866 !important; /* doré/moutarde */
  color: #6b3f5c !important; /* texte foncé, assorti au mauve */
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 40px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.15s ease;
  width: auto !important;
  height: auto !important;
}

.wpforms-container button.wpforms-submit:hover {
  background-color: #c9a856 !important;
  transform: translateY(-1px);
}

/* Messages d'erreur (garder lisibles sur fond foncé) */
.wpforms-container .wpforms-error {
  color: #ffb3b3 !important;
}

.wpforms-container input.wpforms-error,
.wpforms-container textarea.wpforms-error {
  border-color: #ff8080 !important;
}

body {
  position: relative;
  overflow-x: hidden; /* évite un débordement horizontal causé par le cercle */
}

body::before {
  content: "";
  position: fixed; /* reste fixe à l'écran même en scrollant */
  top: -80px;
  right: -100px;
  width: 300px;
  height: 300px;
  border: 1px solid #f0dce7; /* épaisseur + couleur du trait */
  border-radius: 50%;
  background: transparent;
  z-index: -1; /* derrière tout le contenu du site */
  pointer-events: none; /* n'interfère pas avec les clics/scroll */
}
body::after {
  content: "";
  position: fixed; /* reste fixe à l'écran même en scrollant */
  top: -160px;
  right: -200px;
  width: 500px;
  height: 500px;
  border: 1px solid #f0dce7; /* épaisseur + couleur du trait */
  border-radius: 50%;
  background: transparent;
  z-index: -1; /* derrière tout le contenu du site */
  pointer-events: none; /* n'interfère pas avec les clics/scroll */
}

/* ============================================================
   HEADER STICKY — melizzatorrejano.fr
   Version basée sur le réglage natif "Mobile" (pas "Toujours") :
   on laisse WordPress gérer nativement l'ouverture du menu (fond,
   centrage, z-index...), et on n'intervient que pour :
   1) les couleurs/styles propres au site
   2) étendre le seuil du hamburger jusqu'à la tablette (1024px)
   3) repasser en menu plat normal à partir du desktop (1025px)

   IMPORTANT : dans l'éditeur, le réglage "Visibilité de la
   superposition" du bloc Navigation doit être sur "Mobile"
   (PAS "Toujours" — c'est ce réglage qui causait tous les problèmes
   précédents, en activant un mode spécial de WordPress qui masque
   le vrai menu).
   ============================================================ */

/* ---------- En-tête : collé en haut au scroll ---------- */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid transparent;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
/* Le flou + le fond semi-transparent sont sur un pseudo-élément plutôt
   que sur le header lui-même : "backdrop-filter" crée un nouveau
   repère de positionnement pour tout ce qui est en position:fixed
   à l'intérieur (comme le menu mobile de WordPress), ce qui le
   piégeait dans la hauteur du header au lieu du plein écran. */
header.wp-block-template-part::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(251, 246, 243, 0.86);
  backdrop-filter: blur(10px);
}
header.wp-block-template-part.is-scrolled {
  border-bottom-color: #e3cbda;
  box-shadow: 0 8px 24px -20px rgba(107, 63, 92, 0.4);
}

/* ---------- Logo + nom du site ---------- */
header.wp-block-template-part .wp-block-site-title a {
  font-family: "Cormorant Garamond", serif;
  color: #6b3f5c;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}
header.wp-block-template-part .custom-logo {
  border-radius: 50%;
  transition:
    transform 0.3s ease,
    margin-top 0.3s ease;
  transform-origin: left center;
}
header.wp-block-template-part.is-scrolled .custom-logo {
  transform: scale(0.9);
  margin-top: 4px;
}
@media (max-width: 719px) {
  header.wp-block-template-part .wp-block-site-title a {
    font-size: 16px;
  }
}

/* ---------- Style des liens de menu ---------- */
.wp-block-navigation-item__content {
  color: #6e5a67;
  text-decoration: none;
}
.wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
  background: #6b3f5c;
  color: #fbf6f3;
  border-radius: 999px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  padding: 11px 22px;
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  fill: #6b3f5c;
}

/* Le vrai bouton fermer dans cette configuration s'appelle
   ".wp-block-navigation-overlay-close" (il n'existe pas de
   "-responsive-container-close" ici, on avait ciblé le mauvais nom).
   IMPORTANT : ces règles ne s'appliquent que quand le menu est
   RÉELLEMENT ouvert (.is-menu-open) — sinon le bouton et son
   conteneur restaient visibles en permanence, y compris sur desktop. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-overlay-close {
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 100001 !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-overlay-close
  svg {
  fill: #6b3f5c !important;
  width: 24px !important;
  height: 24px !important;
}

/* Idem : ce conteneur ne doit être visible QUE quand le menu est
   ouvert, jamais en permanence. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__overlay-container {
  display: block !important;
  position: static !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__overlay-container
  > .wp-block-group {
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__overlay-container
  [aria-label="menu Pied de page"] {
  display: none !important;
}
/* Fermé (ou sur desktop où le menu ne s'ouvre jamais) : caché, point final. */
.wp-block-navigation__overlay-container {
  display: none;
}

/* ---------- Couleurs du panneau ouvert + vrai centrage vertical ----------
   On centre directement sur ce conteneur (qui a une vraie hauteur,
   100vh via position:fixed), pas sur un enfant plus profond dont les
   parents n'ont pas de hauteur définie (un height:100% n'y aurait
   aucun effet). */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: #fbf6f3 !important;
  color: #3a2a35 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ---------- LA VRAIE CORRECTION ----------
   La classe "disable-default-overlay" est présente en permanence sur
   ce bloc (indépendamment du réglage Mobile/Toujours). WordPress a
   une règle native qui cache notre vrai menu (<ul>) et affiche à la
   place un second bloc vide ("overlay-container", avec juste un
   bouton fermer et un menu "Pied de page" vide) dès que cette classe
   est là. On inverse ça : on réaffiche notre vrai menu, et on cache
   ce second bloc dont on n'a pas besoin. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open
  .wp-block-navigation__responsive-container-content
  > *:not(.wp-block-navigation__overlay-container) {
  display: flex !important;
}

/* Mise en page propre du menu une fois qu'il est enfin visible :
   centré, en colonne, avec de l'espace entre chaque lien. */
.wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}
.wp-block-navigation__container {
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
}

/* ---------- Étendre le hamburger jusqu'à la tablette (1024px) ----------
   Par défaut, le réglage "Mobile" de WordPress repasse en menu plat
   dès 600px. On garde le hamburger jusqu'à 1024px à la place. */
@media (min-width: 600px) and (max-width: 1024px) {
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* ---------- À partir de 1025px (desktop) : menu plat classique ---------- */
@media (min-width: 1025px) {
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }
  .wp-block-navigation__responsive-container {
    display: flex !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
  }
  .wp-block-navigation__container {
    flex-direction: row !important;
  }
  .wp-block-navigation-item__content {
    font-size: 14px;
  }
}