/* Méga menus Palmsquare — maquette Figma PALMSQUARE 2026 (rev. badges roses + cartes photo).
   Rendu par wp-content/novamira-sandbox/palmsquare-megamenu.php
   Couleurs : rose #FF00A7, bordure #FF71CE — survol #E42899, bordure #FC78CE */

/* Centrage des deux dropdowns dans le wrapper pleine largeur du widget mega-menu Elementor */
.e-n-menu-content .elementor-element-f29b597,
.e-n-menu-content .elementor-element-ba38443 {
  width: fit-content !important;
  max-width: none !important;
  margin: 26px auto 0 !important;
  transform: none !important;
  padding: 0 !important;
}

.psmm, .psmm * { box-sizing: border-box; }
.psmm {
  width: 980px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .18);
  padding: 42px 45px 26px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-family: 'Satoshi', sans-serif;
  color: #0E0E0E;
  text-align: left;
}
.psmm a { text-decoration: none; }
/* Spécificité renforcée : la couleur de lien globale du kit Elementor ne doit pas déteindre */
.psmm a.psmm__chip { color: #0E0E0E; }
.psmm a.psmm__chip:hover, .psmm a.psmm__chip:focus-visible { color: #FF00A7; }
.psmm a.psmm__btn, .psmm a.psmm__btn:hover, .psmm a.psmm__btn:focus-visible { color: #FFFFFF; }
.psmm a.psmm__soc, .psmm a.psmm__soc:hover { color: #B80072; }
.psmm a.psmm__card, .psmm a.psmm__card:hover { color: #FFFFFF; }

.psmm__row { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; }
.psmm__col { display: flex; flex-direction: column; gap: 12px; }
.psmm__col--1 { width: 274px; }
.psmm__col--2 { width: 240px; }

/* Titre de colonne — badge rose incliné, Livvic Bold */
.psmm__coltitle {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  align-self: flex-start;
  background: #FF00A7;
  border: 3px solid #FF71CE;
  border-radius: 30px;
  padding: 3px 16px 5px;
  transform: rotate(-1.5deg);
  font-family: 'Livvic', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 1.25;
  color: #FFFFFF;
  text-shadow: 0 3px 4px rgba(0, 0, 0, .18);
  margin: 0 0 10px 2px;
  white-space: nowrap;
}

/* Chips de liens — au survol : le texte passe du noir au rose */
.psmm__chip {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  border-radius: 12px;
  color: #0E0E0E;
  transition: color .18s ease;
}
.psmm__chip:hover, .psmm__chip:focus-visible { color: #FF00A7; }
.psmm__chiptitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  line-height: 20px;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
.psmm__chiptitle svg { flex: none; transition: transform .2s ease; }
/* Flèches : rotation 45° vers la droite au survol (↗ devient →) */
.psmm__chip:hover .psmm__chiptitle svg,
.psmm__chip:focus-visible .psmm__chiptitle svg { transform: rotate(45deg); }
.psmm__chipdesc { font-size: 18px; line-height: 22px; font-weight: 500; color: inherit; }

/* Carte réalisation — photo pleine carte, dégradé, titre blanc, bouton rond rose */
.psmm__card {
  position: relative;
  width: 287px;
  height: 325px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 8px;
  overflow: hidden;
  padding: 16px;
  background-size: cover;
  background-position: center;
  color: #FFFFFF;
}
.psmm__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .6) 70%);
  pointer-events: none;
}
.psmm__tags { display: flex; gap: 8px; align-items: flex-start; position: relative; z-index: 1; }
.psmm__tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .21);
  background: rgba(42, 42, 42, .38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.psmm__cardfoot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.psmm__cardtitle {
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  color: #FFFFFF;
  max-width: 190px;
}

/* Bouton rond rose — survol : rose foncé */
.psmm__circle {
  flex: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 0, 167, .9);
  border: 2px solid rgba(252, 120, 206, .9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .18s ease, border-color .18s ease;
}
.psmm__circle svg { transition: transform .2s ease; }
.psmm__card:hover .psmm__circle, .psmm__card:focus-visible .psmm__circle {
  background: #E42899;
  border-color: #FC78CE;
}
.psmm__card:hover .psmm__circle svg,
.psmm__card:focus-visible .psmm__circle svg { transform: rotate(45deg); }

/* Boutons — rose #FF00A7 / bordure #FF71CE, survol #E42899 / #FC78CE */
.psmm__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FF00A7;
  border: 2px solid #FF71CE;
  border-radius: 375px;
  color: #FFFFFF;
  font-family: 'Satoshi', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 20px;
  transition: background .18s ease, border-color .18s ease;
}
.psmm__btn:hover, .psmm__btn:focus-visible { background: #E42899; border-color: #FC78CE; color: #FFFFFF; }
.psmm__btn svg { transition: transform .2s ease; }
.psmm__btn:hover svg, .psmm__btn:focus-visible svg { transform: rotate(45deg); }

/* Bandeau CTA */
.psmm__cta {
  position: relative;
  display: flex;
  align-items: center;
  background: #FFEFFA;
  border: 2px solid #FFE7F7;
  border-radius: 8px;
  padding: 26px;
  overflow: hidden;
}
.psmm__ctatext {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 555px;
}
.psmm__ctatitle { font-size: 25px; font-weight: 500; line-height: 1.25; color: #0E0E0E; }
.psmm__ctatitle em { font-family: 'Livvic', sans-serif; font-style: italic; font-weight: 700; }
.psmm__ctatitle--sm { font-size: 25px; }
.psmm__ctadesc { font-size: 16px; line-height: 1.5; font-weight: 500; margin: 0; color: #0E0E0E; }
.psmm__cta .psmm__btn { margin-top: 6px; }
.psmm__flamingo {
  position: absolute;
  right: 12px;
  bottom: -6px;
  width: 280px;
  z-index: 1;
  pointer-events: none;
}

/* Bandeau réseaux sociaux (Ressources) */
.psmm__cta--social { background: #FFF6FC; border: none; justify-content: space-between; padding: 24px 26px; min-height: 128px; }
.psmm__socials { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.psmm__soc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 6px 13px;
  border-radius: 45px;
  background: #FFC7EC;
  color: #B80072;
  font-size: 13px;
  font-weight: 700;
  transition: background .18s ease;
}
.psmm__soc:hover, .psmm__soc:focus-visible { background: #FF71CE; }
.psmm__soc img { display: block; }

/* Animation « roll » des réseaux sociaux — identique au footer */
.psmm__soc { overflow: hidden; }
.psmm__soc img, .psmm__soc span {
  will-change: transform, opacity, filter;
  transform: translate3d(0, 0, 0);
}
.psmm__soc:hover img, .psmm__soc:hover span {
  animation: psmm-roll .42s cubic-bezier(.76, 0, .24, 1);
}
@keyframes psmm-roll {
  0% { transform: translate3d(0, 0, 0); opacity: 1; filter: blur(0); }
  40% { transform: translate3d(0, 100%, 0); opacity: 0; filter: blur(6px); }
  50% { transform: translate3d(0, -100%, 0); opacity: 0; filter: blur(6px); }
  100% { transform: translate3d(0, 0, 0); opacity: 1; filter: blur(0); }
}

/* Déco : composition carte postale + visages (image unique fournie) */
.psmm__decoimg {
  display: block;
  width: 230px !important;
  height: auto !important;
  max-width: none;
  flex: none;
  align-self: flex-end;
  /* le bord coupé du timbre s'aligne sur le bas du bandeau */
  margin: 0 0 -24px;
}

/* ==================== Menu mobile plein écran (≤ 1024 px) ==================== */
.psmb-burger, .psmb-nav { display: none; }

@media (max-width: 1024px) {
  /* Ancien menu nav Elementor (burger + dropdown) remplacé */
  .elementor-element-d7cf97e { display: none !important; }

  .psmb-burger {
    display: flex;
    position: fixed;
    top: 17px;
    right: 22px;
    z-index: 10010;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
  }
  body.admin-bar .psmb-burger { top: 63px; }
  .psmb-burger svg { display: block; width: 30px !important; height: 30px !important; flex: 0 0 30px !important; }
  .psmb-nav svg, .psmb-nav img { flex: 0 0 auto; }

  body.psmb-open { overflow: hidden; }

  .psmb-nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10020;
    background: #FFFFFF;
    flex-direction: column;
    padding: 16px 22px calc(20px + env(safe-area-inset-bottom));
    font-family: 'Satoshi', sans-serif;
    color: #0E0E0E;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    overflow: hidden;
  }
  body.admin-bar .psmb-nav { top: 46px; }
  body.psmb-open .psmb-nav {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
  .psmb-nav a { text-decoration: none; }

  .psmb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
  }
  .psmb-head img { height: 38px; width: auto; display: block; }
  .psmb-close { background: none; border: 0; padding: 10px; cursor: pointer; color: #0E0E0E; }

  .psmb-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 0 20px;
    position: relative;
    z-index: 2;
  }

  .psmb-acc-title,
  a.psmb-link--top {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 15px 0 !important;
    margin: 0 !important;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: 'Satoshi', sans-serif;
    font-size: 21px;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    color: #0E0E0E;
  }
  /* Neutralise les styles globaux de bouton du thème (fond foncé au tap/survol) */
  .psmb-acc-title,
  .psmb-acc-title:hover,
  .psmb-acc-title:focus,
  .psmb-acc-title:active,
  .psmb-close,
  .psmb-close:hover,
  .psmb-close:focus,
  .psmb-close:active,
  .psmb-burger:hover,
  .psmb-burger:focus,
  .psmb-burger:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    border: 0 !important;
  }
  .psmb-acc-title:hover, .psmb-acc-title:active { color: #FF00A7; }
  .psmb-close:hover, .psmb-close:focus, .psmb-close:active { color: #0E0E0E; }
  .psmb-acc-title svg { transition: transform .25s ease; flex: none; }
  .psmb-acc.open .psmb-acc-title { color: #FF00A7; }
  .psmb-acc.open .psmb-acc-title svg { transform: rotate(180deg); }

  .psmb-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .psmb-acc.open .psmb-acc-body { max-height: 900px; }

  .psmb-group {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    margin: 8px 0 2px;
    padding-left: 12px;
  }
  a.psmb-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 10px 12px;
    font-size: 17px;
    font-weight: 700;
    color: #0E0E0E;
  }
  a.psmb-link:active, a.psmb-link:hover { color: #FF00A7; }

  .psmb-flamingo {
    position: absolute;
    right: -34px;
    bottom: 150px;
    width: 210px;
    opacity: .14;
    z-index: 1;
    pointer-events: none;
  }

  .psmb-foot {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    border-top: 2px solid #FFE7F7;
  }
  a.psmb-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #FF00A7;
    border: 2px solid #FF71CE;
    border-radius: 375px;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    padding: 16px 20px;
    transition: background .18s ease, border-color .18s ease;
  }
  a.psmb-cta:active, a.psmb-cta:hover { background: #E42899; border-color: #FC78CE; color: #FFFFFF; }
  .psmb-socials { display: flex; gap: 6px; flex-wrap: wrap; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .psmb-burger { top: 38px; right: 34px; }
  body.admin-bar .psmb-burger { top: 84px; }
}
@media (min-width: 783px) and (max-width: 1024px) {
  body.admin-bar .psmb-burger { top: 70px; }
}

@media (min-width: 1025px) {
  .psmb-burger, .psmb-nav { display: none !important; }
}

/* ==================== Fond dégradé du site sur mobile ====================
   Source principale : style.css du thème enfant. Cette copie sert de relais immédiat :
   les navigateurs gardent longtemps l'ancien style.css en cache (LiteSpeed retire les
   query strings), alors que ce fichier-ci change de nom à chaque version.
   Le body DOIT être transparent : html a un fond explicite sur mobile, donc le fond du
   body ne se propage plus au canvas et se peindrait par-dessus le ::before (z-index -1). */
@media screen and (max-width: 767px) {
  body:not(.wp-admin):not(.elementor-editor-active):not(.single-post) {
    background: transparent !important;
  }
  /* « html body » = spécificité supérieure à la règle du thème enfant : ce relais gagne
     même si un ancien style.css traîne en cache navigateur et se charge après. */
  html body:not(.wp-admin):not(.elementor-editor-active):not(.single-post)::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(
        circle 340px at 50% 0%,
        rgba(255, 0, 168, 0.14) 0%,
        rgba(255, 25, 255, 0) 60%
      ),
      radial-gradient(
        118.23% 39.04% at 148.37% 114.54%,
        rgba(181, 181, 181, 0.25) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        86% 41.58% at -38.82% 37.33%,
        rgba(181, 181, 181, 0.75) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        circle 300px at 108% 41.23%,
        rgba(255, 0, 168, 0.30) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      radial-gradient(
        circle 520px at -25% 92%,
        rgba(255, 0, 168, 0.35) 0%,
        rgba(255, 255, 255, 0) 100%
      ),
      #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}