/*
 * Mégamenu desktop et drawer mobile.
 *
 * Le panneau s'ouvre en CSS pur : :hover pour la souris, :focus-within pour le
 * clavier. Le JavaScript n'ajoute que Escape et la gestion du drawer — sans lui,
 * le menu reste entièrement utilisable.
 */

/* ---------- Mégamenu (desktop uniquement) ---------- */

.dm-mega { display: none; }

@media (min-width: 1024px) {
  .main-menu li,
  .dm-has-mega > li { position: static; }

  /* Le panneau s'ancre sur la BARRE de navigation, pas sur le <ul> du menu.
     Le <ul> ne fait ni la largeur ni la hauteur de la barre — ses <li> flottent,
     donc sa hauteur calculée est 0 et un top:100% s'y référant vaut 0. S'y
     ancrer plaçait le panneau à cheval sur la navbar et décalé vers la droite,
     défaut d'autant plus visible une fois l'en-tête en position sticky.

     La déclaration doit être plus spécifique que celle du thème parent, qui
     met ce <ul> en position:relative — sans quoi il reste l'offsetParent. */
  .main-head .navigation ul.menu.dm-has-mega,
  .navigation ul.menu.dm-has-mega { position: static; }

  .main-head .navigation,
  .navigation.has-logo { position: relative; }

  .dm-mega {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    /* top:100% se réfère au PADDING-box de la barre : sa bordure basse de 2 px
       s'ajoute par-dessus et laissait le panneau mordre sur la navbar. */
    top: calc(100% + 2px);
    z-index: 400;
    background: #fff;
    border-top: 3px solid #3192d3;
    box-shadow: 0 12px 28px rgba(25, 35, 45, .13);

    /* Fermé par défaut, sans display:none pour rester focusable au clavier. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }

  .dm-has-mega > li:hover > .dm-mega,
  .dm-has-mega > li:focus-within > .dm-mega,
  .dm-has-mega > li.dm-mega-ouvert > .dm-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* En sticky, SmartMag réutilise la même .navigation mais la passe en pleine
     largeur et ramène sa bordure basse de 2 px à 1 px : la compensation doit
     suivre, sinon un liseré d'un pixel se glisse entre la barre et le panneau.
     Le contenu reste centré sur 1200 px grâce à .dm-mega__inner. */
  .navigation.sticky .dm-mega { top: calc(100% + 1px); }

  .dm-mega__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 24px 18px;
  }

  .dm-mega__cartes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .dm-mega__carte { display: block; color: inherit; text-decoration: none; min-width: 0; }
  .dm-mega__media { display: block; margin-bottom: 8px; }

  .dm-mega__titre {
    display: block;
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 14px;
    line-height: 1.35;
    color: #19232d;
  }

  .dm-mega__carte:hover .dm-mega__titre { color: #2477b0; }

  .dm-mega__tout {
    display: inline-block;
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    color: #3192d3;
    padding: 8px 0;
  }
}

/* ---------- Drawer mobile ---------- */

.dm-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .22s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
}

.dm-drawer[data-ouvert="1"] { transform: translateX(0); visibility: visible; }

.dm-drawer__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #d7e3ea;
}

.dm-drawer__fermer {
  background: none;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: #19232d;
  /* cible tactile de 44 px */
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.dm-drawer__corps { padding: 8px 16px 40px; }

.dm-drawer__liste { list-style: none; margin: 0; padding: 0; }

.dm-drawer__liste a {
  display: block;
  padding: 14px 0;
  min-height: 44px;
  font-family: 'Roboto Slab', Georgia, serif;
  font-size: 17px;
  color: #19232d;
  text-decoration: none;
  border-bottom: 1px solid #d7e3ea;
}

.dm-drawer__liste a:hover { color: #2477b0; }

.dm-drawer__liste--base a { color: #3192d3; font-weight: 700; }

body.dm-drawer-ouvert { overflow: hidden; }

@media (min-width: 1024px) {
  .dm-drawer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-mega, .dm-drawer { transition: none; }
}