/* 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: 1010px;
  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: 40px; align-items: flex-start; }
.psmm__col { display: flex; flex-direction: column; gap: 12px; }
.psmm__col--1 { width: 274px; }
.psmm__col--2 { width: 228px; }

/* 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;
  margin-left: auto;
  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;
  }
  @media (hover: hover) { a.psmb-cta:hover { background: #E42899; border-color: #FC78CE; color: #FFFFFF; } }
a.psmb-cta:active { 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 du site ====================
   Le fond de page (maquette Figma node 9054-5463) n'est plus relaye ici.
   Il vit desormais dans Apparence > Personnaliser > CSS additionnel, dont la regle
   est imprimee en dernier dans le <head> avec une specificite (0,5,2) superieure a
   toutes les copies du theme : elle gagne meme si un ancien style.css traine en cache.
   Le theme enfant en garde une copie identique en secours. */

/* 2026-09-06 : pas de survol collé sur tactile */
@media (hover: none) {
  .psmm__btn:hover, .psmm__card:hover .psmm__circle { background: #FF00A7; border-color: #FF71CE; }
  a.psmb-cta:hover { background: #FF00A7; border-color: #FF71CE; color: #FFFFFF; }
}

/* 2026-09-09 – Accordéon Elementor (nested accordion) : le <h3> du titre hérite de la typo réglée dans le widget
   au lieu de la typo globale H3 du kit (Livvic 700), qui écrasait famille, graisse et couleur. */
.elementor-widget-n-accordion .e-n-accordion-item-title-text {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
}

/* Apparence par défaut des titres d'accordéon = ancien rendu (Livvic 700). Faible spécificité : un réglage
   Typographie fait dans le widget (Style > Titre) gagne, et le <h3> le suit grâce aux inherit ci-dessus. */
.elementor-widget-n-accordion .e-n-accordion-item-title { font-family: "Livvic", sans-serif; font-weight: 700; }

/* ==================== Menu mobile : ouverture fluide (12/10/2026) ====================
   Le panneau ne se superpose plus en fondu : il part de la carte blanche du header
   (position, taille et arrondis calculés en JS dans --psmb-t/r/b/l/rad) et s'agrandit
   jusqu'au plein écran. Le logo du panneau est calé pile sur celui du header, il ne bouge pas.
   Le burger se transforme en croix (la croix du panneau est masquée).
   Les liens arrivent ensuite un par un (--psmb-i posé en JS). */
@media (max-width: 1024px) {
  .psmb-burger { z-index: 10030; }

  .psmb-burger .psmb-l {
    transform-origin: 12px 12px;
    transition: transform .5s cubic-bezier(.76, 0, .24, 1), opacity .25s ease;
  }
  body.psmb-open .psmb-burger .psmb-l1 { transform: rotate(45deg) translateY(6px) scaleX(1.12); }
  body.psmb-open .psmb-burger .psmb-l2 { opacity: 0; transform: scaleX(.2); }
  body.psmb-open .psmb-burger .psmb-l3 { transform: rotate(-45deg) translateY(-6px) scaleX(1.12); }

  .psmb-nav .psmb-close { opacity: 0; pointer-events: none; }

  .psmb-nav {
    opacity: 1;
    transform: none;
    -webkit-clip-path: inset(var(--psmb-t, 0px) var(--psmb-r, 0px) var(--psmb-b, 90%) var(--psmb-l, 0px) round var(--psmb-radt, 0px) var(--psmb-radt, 0px) var(--psmb-rad, 16px) var(--psmb-rad, 16px));
    clip-path: inset(var(--psmb-t, 0px) var(--psmb-r, 0px) var(--psmb-b, 90%) var(--psmb-l, 0px) round var(--psmb-radt, 0px) var(--psmb-radt, 0px) var(--psmb-rad, 16px) var(--psmb-rad, 16px));
    transition: clip-path .42s cubic-bezier(.65, 0, .35, 1), -webkit-clip-path .42s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .42s;
  }
  body.psmb-open .psmb-nav {
    opacity: 1;
    transform: none;
    -webkit-clip-path: inset(0px 0px 0px 0px round 0 0 0 0);
    clip-path: inset(0px 0px 0px 0px round 0 0 0 0);
    transition: clip-path .6s cubic-bezier(.76, 0, .24, 1), -webkit-clip-path .6s cubic-bezier(.76, 0, .24, 1), visibility 0s;
  }

  /* Contenu : sortie rapide, entrée en cascade une fois le panneau bien ouvert */
  .psmb-scroll > *,
  .psmb-foot > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .15s ease, transform .15s ease;
  }
  .psmb-nav .psmb-flamingo {
    opacity: 0;
    transform: translateY(24px) rotate(-4deg);
    transition: opacity .15s ease, transform .15s ease;
  }
  body.psmb-open .psmb-scroll > *,
  body.psmb-open .psmb-foot > * {
    opacity: 1;
    transform: none;
    transition: opacity .45s ease calc(.22s + var(--psmb-i, 0) * .055s), transform .6s cubic-bezier(.22, 1, .36, 1) calc(.22s + var(--psmb-i, 0) * .055s);
  }
  body.psmb-open .psmb-nav .psmb-flamingo {
    opacity: .14;
    transform: none;
    transition: opacity .8s ease .35s, transform 1s cubic-bezier(.22, 1, .36, 1) .35s;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .psmb-nav, body.psmb-open .psmb-nav { -webkit-clip-path: none; clip-path: none; }
  .psmb-nav { opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
  body.psmb-open .psmb-nav { opacity: 1; transition: opacity .2s ease, visibility 0s; }
  .psmb-burger .psmb-l,
  .psmb-scroll > *, .psmb-foot > *, .psmb-nav .psmb-flamingo,
  body.psmb-open .psmb-scroll > *, body.psmb-open .psmb-foot > *, body.psmb-open .psmb-nav .psmb-flamingo { transition-duration: .01s; transition-delay: 0s; transform: none; }
}