/* Déclinaison mobile, sous 900 px.

   Chaque page porte deux balisages : .mb-bureau, repris de la maquette
   desktop, et .mb-mobile, repris de la maquette mobile. Un seul est montré.
   Les règles de base de la maquette mobile sont cantonnées à son bloc : elles
   diffèrent légèrement de celles des pages desktop (couleur du texte,
   interligne des titres). */

.mb-mobile { display:none; }

@media (max-width: 899px) {
  .mb-bureau { display:none; }
  .mb-mobile { display:block; color:#140E2E; font-size:15px; line-height:1.55; }
}

.mb-mobile h1, .mb-mobile h2, .mb-mobile h3, .mb-mobile p, .mb-mobile figure, .mb-mobile blockquote { margin:0; }
.mb-mobile h1, .mb-mobile h2, .mb-mobile h3 {
  max-width:none; overflow-wrap:normal;
  font-weight:800; letter-spacing:-.025em; line-height:1.08; text-wrap:balance;
}
.mb-mobile p { text-wrap:wrap; }
.mb-mobile ul { margin:0; padding:0; list-style:none; }

.mb-mobile [data-avis-mobile]::-webkit-scrollbar { display:none; }

@keyframes glisse { 0%, 62%, 100% { transform:translateX(0) } 74% { transform:translateX(-26px) } 86% { transform:translateX(0) } }
@keyframes fleche { 0%, 100% { transform:translateX(0); opacity:.6 } 50% { transform:translateX(5px); opacity:1 } }
@keyframes molette { 0% { transform:translateY(0); opacity:1 } 70% { transform:translateY(10px); opacity:0 } 100% { transform:translateY(0); opacity:0 } }
@media (prefers-reduced-motion: reduce) { [data-glisse] { animation:none !important } }

/* Le menu couvrait l'écran du téléphone ; il couvre ici la fenêtre. */
.mb-mobile [data-menu] { position:fixed !important; }
.mb-mobile [data-menu] .mn-voile { opacity:0; transition:opacity .35s ease }
/* replié, le panneau est masqué une fois sorti : son ombre débordait sur le bord droit */
.mb-mobile [data-menu] .mn-feuille { transform:translateX(104%); visibility:hidden; transition:transform .5s cubic-bezier(.2,.85,.2,1), visibility 0s linear .5s }
.mb-mobile [data-menu] .mn-lien { opacity:0; transform:translateX(28px); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.85,.2,1) }
.mb-mobile [data-menu] .mn-x { transform:rotate(-90deg); transition:transform .45s cubic-bezier(.2,.85,.2,1) .1s }
.mb-mobile [data-menu][data-open="1"] { pointer-events:auto !important }
.mb-mobile [data-menu][data-open="1"] .mn-voile { opacity:1 }
.mb-mobile [data-menu][data-open="1"] .mn-feuille { transform:none; visibility:visible; transition-delay:0s }
.mb-mobile [data-menu][data-open="1"] .mn-lien { opacity:1; transform:none; transition-delay:var(--d) }
.mb-mobile [data-menu][data-open="1"] .mn-x { transform:none }
.mb-mobile [data-burger] > span { transition:transform .3s ease, opacity .2s ease }
@media (prefers-reduced-motion: reduce) { .mb-mobile [data-menu] .mn-feuille, .mb-mobile [data-menu] .mn-lien, .mb-mobile [data-menu] .mn-voile { transition:none !important } }

.mb-mobile a { color:#6D4FD0; text-decoration:none }
.mb-mobile a:hover { color:#4C2FA8 }

/* Retouche demandée hors maquette : le hero épouse son contenu, et « Découvrir »
   se tient à ~19 px sous les boutons au lieu de flotter en bas d'un bloc de 560 px.
   Seuls les heros qui portent ce « Découvrir » (flèche data-glisse) sont concernés. */
.mb-mobile [data-hero]:has([data-glisse]) { min-height:0 !important; padding-bottom:100px !important; }
.mb-mobile [data-hero] > * { opacity:var(--ho,1); transform:translateY(var(--hy,0)); }
.mb-mobile [data-rev] > * { opacity:0; transform:translateY(28px); transition:opacity .55s cubic-bezier(.16,.84,.3,1), transform .65s cubic-bezier(.16,.84,.3,1) }
.mb-mobile [data-rev].vu > * { opacity:1; transform:none }
.mb-mobile [data-rev].vu > *:nth-child(2) { transition-delay:.08s } .mb-mobile [data-rev].vu > *:nth-child(3) { transition-delay:.16s } .mb-mobile [data-rev].vu > *:nth-child(4) { transition-delay:.24s } .mb-mobile [data-rev].vu > *:nth-child(5) { transition-delay:.32s } .mb-mobile [data-rev].vu > *:nth-child(n+6) { transition-delay:.4s }
.mb-mobile [data-rev]:not(.vu) > span[style*="uppercase"] { transform:translateX(-24px) }
@media (prefers-reduced-motion: reduce) { .mb-mobile [data-rev] > * { opacity:1 !important; transform:none !important } .mb-mobile [data-hero] > * { opacity:1 !important; transform:none !important } }

/* Bandeau Medibox Lab, posé par mobile.js sous l'en-tête de toutes les pages. */
.mb-mobile .mb-appli { position:sticky; z-index:4; display:flex; align-items:center; gap:10px; padding:8px 6px 8px 14px; background-color:#07050D; background-image:radial-gradient(260px 120px at 100% 0%, rgba(109,79,208,.6), rgba(109,79,208,0) 70%); color:#ffffff; box-shadow:0 8px 20px -10px rgba(20,14,46,.45) }
.mb-mobile .mb-appli img { width:36px; height:36px; border-radius:9px; display:block; flex:none }
.mb-mobile .mb-appli-texte { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px }
.mb-mobile .mb-appli-texte strong { font-size:14px; font-weight:800; line-height:1.2 }
.mb-mobile .mb-appli-texte span { font-size:11.5px; line-height:1.25; color:#D9CCFF }
.mb-mobile .mb-appli a { flex:none; display:flex; align-items:center; min-height:36px; padding:0 14px; border-radius:10px; background:#ffffff; color:#0F0B1C; font-size:13px; font-weight:700 }
.mb-mobile .mb-appli button { flex:none; width:32px; height:36px; padding:0; border:0; background:none; color:#C4B5FD; font:inherit; font-size:22px; line-height:1; cursor:pointer }