/* ═══════════════════════════════════════════════════════════════
   Why – Offcanvas ("Full Width") : fond du panneau droit en mobile
   + menu masqué derrière le tiroir sur écrans courts
   v1.1.0
   Rôle : uniquement esthétique — indépendant des interrupteurs
   Elementor "Visibilité par appareil (Why)" (section Offcanvas du
   widget d'en-tête) qui gèrent l'affichage/masquage eux-mêmes.
   Pour revenir en arrière : supprimer ce fichier + why-offcanvas-visibility.php.
   ═══════════════════════════════════════════════════════════════ */

/* Le calque de fond dédié (.tp-offcanvas-2-bg.is-right) est déjà
   visible dès 768px dans le thème (classe d-md-block) et récupère sa
   couleur ailleurs (réglages globaux du site) : rgb(18, 18, 18),
   quasi noir. En dessous de 768px, ce calque de fond reste caché
   (d-none) alors que le panneau de contenu, lui, peut désormais
   s'afficher (interrupteur Elementor mis sur "Oui" par défaut). Sans
   fond propre, le texte blanc du contenu se retrouverait illisible
   sur fond transparent. On reprend ici la même couleur que celle
   utilisée par le calque dès 768px, pour une continuité visuelle. */
@media screen and (max-width: 767px) {
  .tp-offcanvas-2-wrapper .right-box {
    background-color: rgb(18, 18, 18);
  }
}

/* ── 3. Le tiroir droit (contact) cache le bas du menu sur les écrans
   courts (ex. iPhone SE, 667px de haut) ──────────────────────────
   Le thème positionne le tiroir droit en `bottom:0, height:48vh` sur
   mobile (donc ~320px sur un écran de 667px). Le menu de gauche, lui,
   occupe toute la hauteur (`height:100vh`) sans jamais laisser de
   place pour ce tiroir : sur un écran assez court, son dernier
   élément ("Contact") se retrouve simplement SOUS le tiroir, caché
   derrière son fond opaque — repérable en comparant un écran haut
   (844px, où les 4 liens tiennent au-dessus du tiroir, aucun souci)
   à un écran court (667px, où "Contact" disparaît).
   Fix structurel plutôt que du réglage au pixel près par élément :
   le tiroir est un élément séparé, posé PAR-DESSUS (position fixed,
   plus tard dans le DOM) — donner du padding-bottom au menu ne
   change rien à ce qui est visuellement recouvert, seulement à ce
   qu'on peut faire défiler APRÈS le dernier lien. Ce qu'il faut,
   c'est réduire la hauteur RÉELLE du panneau gauche pour qu'il
   s'arrête avant le tiroir (`height: calc(100vh - 48vh)` au lieu de
   `100vh`). Le thème rend déjà ce panneau scrollable en continu
   (`overflow-y:scroll`, toujours actif — voir liko-core.css) : sur
   la quasi-totalité des écrans les 4 liens tiennent largement dans
   cette hauteur réduite (aucun scroll nécessaire) ; uniquement sur
   un écran encore plus court ou un menu plus long, le scroll déjà en
   place prend le relais tout seul. Reste valable quel que soit le
   nombre de liens du menu ou la hauteur de l'écran, sans qu'il
   faille retoucher quoi que ce soit d'imbriqué à l'intérieur.
   Sélecteur à spécificité supérieure (3 classes) pour battre le
   `height:100vh` non conditionnel du thème (2 classes). */
@media screen and (max-width: 767px) {
  .tp-offcanvas-2-wrapper .tp-offcanvas-2-left.left-box {
    height: calc(100vh - 48vh) !important;
  }
}