/* ==========================================================================
   Astral Voyance — Silo voyance
   1. Mega menu (chargé sur TOUT le site, y compris les pages légales)
   2. Bloc de maillage interne « À lire aussi »
   ========================================================================== */

:root {
  --srh-mm-violet: #5F27CD;
  --srh-mm-violet-soft: #F0EAFD;
  --srh-mm-border: #E5E7EB;
  --srh-mm-text: #212529;
  --srh-mm-text-mid: #495057;
  --srh-mm-bg: #F6F6FC;
}

/* ==================== 0. RÉACTIVER LE MENU SUR LES PAGES MONEY ====================
   home.css masque la navigation Astra sur .page-template-page-home, .home et
   body.page-id-20 : le header y était volontairement réduit à logo + CTA.
   Le mega menu doit désormais s'afficher sur tout le site.

   Le préfixe `html` n'est pas décoratif : home.css est chargé APRÈS silo.css,
   donc à spécificité égale il gagnerait. `html body.sr-nav #masthead .x` passe
   devant `body.page-id-20 #masthead .x`, qui est le sélecteur le plus fort
   de home.css sur ces éléments. */

/* Rétablir exactement les valeurs attendues par Astra : .ast-builder-menu est un
   conteneur flex, le forcer en block casse la mise en page du header. */
html body.sr-nav #masthead .ast-builder-menu,
html body.sr-nav #masthead .ast-builder-menu-1 {
  display: flex !important;
}

html body.sr-nav #masthead .main-header-bar-navigation,
html body.sr-nav #masthead nav.main-navigation {
  display: block !important;
}

html body.sr-nav #masthead .menu-toggle,
html body.sr-nav #masthead .ast-mobile-menu-buttons {
  display: flex !important;
}

/* La page d'accueil masquait aussi le header mobile entier (page-id-20).
   À restreindre au mobile : au-delà du point de rupture d'Astra, ce header
   doublonne avec le header desktop. */
@media (max-width: 921px) {
  html body.sr-nav #ast-mobile-header {
    display: block !important;
  }
}

/* La barre réserve 200px à droite pour le CTA téléphone en position absolue :
   la navigation doit s'arrêter avant, sans passer sous le bouton. */
@media (min-width: 922px) {
  html body.sr-nav #masthead .site-header-primary-section-right {
    padding-right: 6px;
  }
  html body.sr-nav #masthead .main-header-menu > .menu-item > a {
    font-weight: 600;
    white-space: nowrap;
  }
}

/* ==================== 1. MEGA MENU ==================== */

/* La description sous chaque lien : masquée par défaut, affichée en desktop.
   En mobile l'accordéon Astra doit rester compact. */
.srh-mm__blurb { display: none; }

@media (min-width: 922px) {

  /* Le li parent sert d'ancrage au panneau */
  .main-header-menu .srh-mega,
  .main-navigation .srh-mega,
  .ast-builder-menu .srh-mega {
    position: relative;
  }

  /* Panneau déroulant : 2 colonnes. Ancré à DROITE de l'entrée de menu, parce que
     la navigation se trouve dans la moitié droite du header : un ancrage à gauche
     ferait déborder le panneau hors de l'écran et créerait un scroll horizontal. */
  .srh-mega > .sub-menu {
    width: 580px !important;
    max-width: calc(100vw - 32px);
    left: auto !important;
    right: 0 !important;
    padding: 12px !important;
    background: #fff;
    border: 1px solid var(--srh-mm-border);
    border-radius: 12px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
  }

  /* Astra ouvre déjà le sous-menu (par visibility) : on force juste la grille.
     .focus est la classe qu'Astra pose lors de la navigation au clavier —
     sans elle, le panneau retomberait sur une seule colonne au clavier. */
  .srh-mega:hover > .sub-menu,
  .srh-mega:focus-within > .sub-menu,
  .srh-mega.focus > .sub-menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
  }

  .srh-mega > .sub-menu > li {
    width: 100% !important;
    border: 0 !important;
  }

  .srh-mega > .sub-menu > li > a {
    display: block !important;
    white-space: normal !important;
    line-height: 1.3;
    padding: 10px 12px !important;
    border-radius: 8px;
    font-weight: 700;
    color: var(--srh-mm-text) !important;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .srh-mega > .sub-menu > li > a:hover,
  .srh-mega > .sub-menu > li > a:focus {
    background: var(--srh-mm-violet-soft) !important;
    color: var(--srh-mm-violet) !important;
  }

  .srh-mm__blurb {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--srh-mm-text-mid);
    white-space: normal;
  }
}

/* ==================== 2. BLOC « À LIRE AUSSI » ==================== */

.srh-related {
  padding: 48px 0 60px;
  background: var(--srh-mm-bg);
  border-top: 1px solid var(--srh-mm-border);
}

.srh-related__title {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 700;
  color: var(--srh-mm-text);
  margin: 0 0 22px;
  line-height: 1.25;
}

.srh-related__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.srh-related__item { margin: 0; }

.srh-related__link {
  display: block;
  height: 100%;
  background: #fff;
  border: 1px solid var(--srh-mm-border);
  border-radius: 10px;
  padding: 15px 17px;
  text-decoration: none !important;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.srh-related__link:hover,
.srh-related__link:focus {
  border-color: var(--srh-mm-violet);
  box-shadow: 0 6px 18px rgba(95, 39, 205, 0.10);
  transform: translateY(-1px);
}

.srh-related__label {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--srh-mm-violet);
  margin-bottom: 5px;
}

.srh-related__blurb {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--srh-mm-text-mid);
}

@media (max-width: 600px) {
  .srh-related { padding: 36px 0 44px; }
  .srh-related__list { grid-template-columns: 1fr; }
}