/* ==========================================================================
   08 - Mobile
   Lot 8, à recetter en dernier une fois le desktop figé.

   Piège principal : le menu est rendu DEUX FOIS dans le DOM, une fois pour le
   desktop et une fois pour le panneau mobile. Les règles du lot 2 ne doivent
   pas s'appliquer au panneau, en particulier le rectangle violet de l'entrée
   active, qui doit rester lisible sur le fond du panneau.
   ========================================================================== */

/* --- Pas de défilement horizontal, jamais --------------------------------- */

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

img, video, iframe, table {
  max-width: 100%;
}

/* --- En-tête mobile -------------------------------------------------------- */

@media (max-width: 1023px) {

  /* Titre réduit, centré, hauteur minimale : même objectif que sur desktop,
     voir le début du contenu sans scroller. */
  .elementor-location-header .hfe-site-title,
  .ehf-header .hfe-site-title,
  .elementor-location-header .elementor-widget-heading .elementor-heading-title,
  .ehf-header .elementor-widget-heading .elementor-heading-title {
    font-size: clamp(1.0625rem, 4.5vw, 1.375rem);
    letter-spacing: .2em;
  }

  .elementor-location-header .elementor-section > .elementor-container,
  .ehf-header .elementor-section > .elementor-container {
    padding-block: .5rem;
  }

  /* Bouton d'ouverture du menu : 44px minimum. */
  .elementor-location-header .hfe-nav-menu__toggle,
  .ehf-header .hfe-nav-menu__toggle,
  .elementor-location-header .elementor-menu-toggle,
  .ehf-header .elementor-menu-toggle,
  .elementor-location-header .menu-toggle,
  .ehf-header .menu-toggle,
  .wpbf-mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--lm-foreground);
  }
}

/* --- Panneau de menu mobile ------------------------------------------------
   Arborescence en accordéon : le site a 27 entrées de menu, un menu à plat
   serait illisible. Le dépliage lui-même est géré par le widget de menu (HFE
   ou Elementor Pro) ; ce fichier ne fait que le rendre utilisable au pouce. */

@media (max-width: 1023px) {

  .elementor-location-header .hfe-nav-menu__layout-vertical .menu-item a,
  .ehf-header .hfe-nav-menu__layout-vertical .menu-item a,
  .elementor-location-header .elementor-nav-menu--dropdown a,
  .ehf-header .elementor-nav-menu--dropdown a,
  .wpbf-mobile-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: .75rem 1.5rem;
    font-size: .875rem;
    border-bottom: var(--lm-rule) solid var(--lm-border);
  }

  /* L'entrée active dans le panneau : pas de rectangle plein, qui écrase la
     lecture sur toute la largeur. Violet sur le texte et filet à gauche. */
  .elementor-location-header .elementor-nav-menu--dropdown .current-menu-item > a,
  .ehf-header .elementor-nav-menu--dropdown .current-menu-item > a,
  .elementor-location-header .hfe-nav-menu__layout-vertical .current-menu-item > a,
  .ehf-header .hfe-nav-menu__layout-vertical .current-menu-item > a,
  .wpbf-mobile-menu .current-menu-item > a {
    background: var(--lm-primary-soft);
    color: var(--lm-primary);
    font-weight: 600;
    border-left: 3px solid var(--lm-primary);
  }

  /* Les sous-niveaux se distinguent par un léger fond et un décalage. */
  .elementor-location-header .elementor-nav-menu--dropdown .sub-menu a,
  .ehf-header .elementor-nav-menu--dropdown .sub-menu a,
  .wpbf-mobile-menu .sub-menu a {
    padding-left: 2.5rem;
    font-size: .8125rem;
    background: rgba(112, 88, 208, .04);
  }

  /* Bouton de dépliage d'un sous-menu : cible tactile suffisante. */
  .elementor-location-header .elementor-nav-menu--dropdown .sub-arrow,
  .ehf-header .elementor-nav-menu--dropdown .sub-arrow,
  .elementor-location-header .hfe-menu-toggle,
  .ehf-header .hfe-menu-toggle {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --- Grilles en mobile ------------------------------------------------------
   2 colonnes, jamais 1. La règle est posée dans 05-grilles.css ; on neutralise
   ici les passages à une colonne imposés par Elementor sur les colonnes de
   section, qui casseraient les mosaïques. */

@media (max-width: 767px) {

  .lm-cols-4 > .elementor-container > .elementor-column,
  .lm-cols-4 > .elementor-container > .elementor-row > .elementor-column {
    flex-basis: 50%;
    max-width: 50%;
  }

  .lm-tile__body { padding: .5rem .625rem; }
  .lm-tile__title { font-size: .8125rem; }
}

/* --- Cibles tactiles -------------------------------------------------------
   Contrôle de recette :
     [...document.querySelectorAll('a, button, input[type=submit]')]
       .filter(e => { const r = e.getBoundingClientRect();
                      return r.height > 0 && r.height < 44; })
   Les liens en flux de texte sont volontairement exclus : imposer 44px à
   chaque lien d'un paragraphe casserait l'interlignage. */

@media (max-width: 767px) {

  .lm-breadcrumb a {
    display: inline-block;
    padding-block: .35rem;
  }

  .lm-footer-links a,
  .lm-newsletter button,
  .lm-newsletter input[type="email"] {
    min-height: 44px;
  }
}

/* --- Page d'accueil en mobile -----------------------------------------------
   Les trois photos passent sur deux colonnes, la signature manuscrite reste
   centrée dessous. À vérifier sur la structure réelle de la page d'accueil :
   si les photos sont dans trois colonnes Elementor, ajouter la classe
   lm-cols-4 sur leur section depuis Elementor pour hériter de la règle
   ci-dessus. */