/* ============================================================================
   Portail eSIM — correctifs UI PWA
   ----------------------------------------------------------------------------
   Problème corrigé : sur /app/welcome et /app/home, en scrollant vers le haut,
   le bas du menu latéral (bouton de thème clair/sombre, « nom de l’app / App
   Version 1.1 » et les icônes de navigation) apparaissait sous le contenu.

   Cause : le template place la sidebar en `position: fixed; left: 0; z-index: 1`
   (voir .dz-floting-sidebar.sidebar dans style.css) et compte sur le panneau de
   contenu `.dz-nav-floting` (z-index: 2, fond blanc, height: 100vh) pour la
   masquer. Sur iOS Safari, la hauteur visible varie quand les barres d'outils
   se rétractent : dès que le panneau ne couvre plus toute la zone visible, la
   sidebar restée en dessous se voit.

   Correctif : la sidebar est rendue réellement invisible tant que le menu n'est
   pas ouvert, et le panneau suit la hauteur dynamique du viewport.
   ========================================================================== */

/* ── 1. La sidebar ne peut plus transparaître quand le menu est fermé ─────── */
.dz-floting-sidebar.sidebar {
  visibility: hidden;
  /* on retarde le masquage pour laisser l'animation de fermeture se jouer */
  transition: visibility 0s linear .5s;
}

body.ms-menu-open .dz-floting-sidebar.sidebar {
  visibility: visible;
  transition-delay: 0s;
}

/* ── 2. Le panneau de contenu suit la hauteur réelle du viewport ──────────── */
/*    100vh sur iOS = hauteur barres d'outils rétractées ; 100dvh suit la
      hauteur réellement visible à tout instant. Le 100vh reste en repli pour
      les navigateurs sans support de dvh. */
.dz-nav-floting {
  height: 100vh;
  height: 100dvh;
}

.dz-nav-floting.show {
  height: calc(100vh - 200px);
  height: calc(100dvh - 200px);
}

/* ── 3. Plus de rebond élastique qui découvrirait le dessous ──────────────── */
html,
body {
  overscroll-behavior-y: none;
}

.dz-nav-floting {
  overscroll-behavior: contain;
}

/* ── 4. Bouton flottant de support (.ms-float-chat) ───────────────────────────
   Le bouton existait dans le HTML de /app/welcome, /app/home et /app/profile
   mais AUCUNE règle CSS ne lui était associée : il retombait donc en flux
   normal (position: static, display: inline, largeur 0) collé au bord gauche,
   sous le contenu — la « petite icône » visible en bas de page. Son icône
   utilisait par ailleurs la police Flaticon (`fi fi-rr-comment`) qui n'est
   chargée nulle part, d'où le glyphe de repli.
   On en fait un vrai bouton d'action flottant, au-dessus de la barre de
   navigation du bas. */
.ms-float-chat {
  position: fixed;
  right: 16px;
  bottom: calc(99px + env(safe-area-inset-bottom, 0px));
  z-index: 101;               /* juste au-dessus de .ms-bottom-nav (z-index 100) */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #04764E;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(4, 118, 78, .35);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ms-float-chat:hover,
.ms-float-chat:focus {
  color: #fff;
}

.ms-float-chat:active {
  transform: scale(.94);
  box-shadow: 0 3px 10px rgba(4, 118, 78, .45);
}

.ms-float-chat svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* La police d'icônes Flaticon n'est pas chargée : on masque le <i> résiduel
   pour éviter le glyphe de repli (le SVG inline le remplace). */
.ms-float-chat i {
  display: none;
}

[dir="rtl"] .ms-float-chat {
  right: auto;
  left: 16px;
}

/* Le menu latéral ouvert fait pivoter le contenu : le bouton flottant ne doit
   pas rester en surimpression. */
body.ms-menu-open .ms-float-chat {
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* ── 5. Libellés de boutons qui disparaissent après un tap ────────────────
   La feuille du template applique `a:hover, a:focus, a.active { color:
   var(--primary-hover) }` à TOUS les liens. Sur un bouton plein, le libellé
   passe donc dans une teinte foncée de la couleur de marque, sur un fond de
   cette même couleur : il devient illisible. Et sur mobile l'état de survol
   reste collé après le toucher, donc le texte ne réapparaît jamais.
   Les boutons pleins gardent leur propre couleur de texte quel que soit
   l'état. Le défaut existait sur les deux marques. */
a.btn-order-action.btn-order-qr,
a.btn-order-action.btn-order-qr:hover,
a.btn-order-action.btn-order-qr:focus,
a.btn-order-action.btn-order-qr.active,
a.ms-plan-btn,
a.ms-plan-btn:hover,
a.ms-plan-btn:focus,
a.ms-plan-btn.active {
  color: #fff !important;
}

/* Boutons à fond clair : le libellé garde la couleur de marque, pas sa
   variante foncée qui vire au illisible sur ces fonds pâles. */
a.btn-order-action.btn-order-chat,
a.btn-order-action.btn-order-chat:hover,
a.btn-order-action.btn-order-chat:focus,
a.btn-order-action.btn-order-chat.active {
  color: var(--primary) !important;
}

/* ------------------------------------------------------------------
   Page de recharge : le carrousel d'aperçu affiche trois fois la même
   image. Le fondu enchaîné n'apporte donc rien, et pendant la
   transition les deux diapositives semi-transparentes laissent
   remonter la couleur de marque du conteneur : la photo « clignote ».
   On fige les diapositives à pleine opacité.
   ------------------------------------------------------------------ */
.product-detail-swiper .swiper-slide {
	opacity: 1 !important;
	/* la transition d'opacité continue d'interpoler malgré la règle
	   ci-dessus : on la coupe pour de bon. */
	transition-property: transform !important;
}