/* ================================================================
   CENTRE D'AIDE FLOTTANT MATH-UNIVERSE — styles.
   Markup : functions.php (mu_help_center_markup), logique :
   js/mu-help-center.js. Trois etats sur la racine [data-state] :
   "bubble" (bulle ronde), "open" (panneau), "bar" (bande minimisee).

   REGLES DU FICHIER :
   - TOUT sélecteur est prefixe par l'ID #mu-help-center : specificite
     (1,x,y), imbattable par le theme. Necessaire : le kit global
     Elementor peint TOUS les <button> en rose via ".elementor-kit-XX
     button" (0,1,1), qui battait un scope en simple classe (0,1,0).
   - Unites en px UNIQUEMENT : Histudy force html{font-size:10px}
     sur la majorite du site, le rem y vaut 10px et non 16px.
   - Animations sur transform/opacity seulement (GPU, pas de reflow).
   ================================================================ */

#mu-help-center {
    /* Palette : violet de la marque (l'ancien tawk custom = #5B0BA0). */
    --hc-grad: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 48%, #5B0BA0 100%);
    --hc-violet: #6D28D9;
    --hc-violet-deep: #5B0BA0;
    --hc-green: #22C55E;
    --hc-ink: #101828;
    --hc-muted: #667085;
    --hc-line: #EDF0F5;
    --hc-soft: #F7F8FB;
    /* Courbes personnalisees : les easings CSS natifs manquent de punch. */
    --hc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --hc-spring: cubic-bezier(0.34, 1.35, 0.64, 1);

    position: fixed;
    /* Deux decalages INDEPENDANTS, chacun ecrit par son propre observateur
       dans mu-help-center.js, additionnes ici :
         --mu-hc-nav-offset : nav mobile fixe du tableau de bord Tutor ;
         --mu-hc-bar-offset : barre d'achat collante des pages de cours
                              (.rbt-course-action-bottom), qui apparait au
                              defilement - le widget remonte juste au-dessus.
       Deux variables plutot qu'une seule partagee : avec une seule, le
       dernier observateur a s'executer ecraserait la valeur de l'autre. La
       repli `0px` fait que chacune est inoffensive quand elle ne s'applique
       pas, sans aucune coordination entre les deux. */
    bottom: calc(24px + var(--mu-hc-nav-offset, 0px) + var(--mu-hc-bar-offset, 0px));
    right: 24px;
    /* Meme duree et meme courbe que la barre d'achat du theme
       (`transition: all .3s`, courbe `ease` par defaut) : les deux glissent
       donc exactement ensemble et se lisent comme un seul mouvement.
       On anime `bottom` et NON `transform` : un transform sur cette racine
       en ferait le bloc conteneur du panneau `position:fixed` du mobile
       (voir plus bas), qui se re-ancrerait alors sur elle au lieu du
       viewport. */
    transition: bottom .3s ease;
    /* Carte des couches du site : toasts Tutor 100000 (--tutor-toast-z) et
       99999999 (ancien systeme), bandeau cookies 999989-999990, barre admin
       99999 (en haut, sans chevauchement), modal recherche ACS 10000.
       99998 = SOUS les notifications et le bandeau cookies (qui doivent
       recouvrir le chat), AU-DESSUS de tout le contenu du site. */
    z-index: 99998;
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    direction: rtl;
    /* Le conteneur lui-meme ne capte jamais un clic : seuls ses enfants. */
    pointer-events: none;
}

/* Masque total : plein ecran video (classe posee par le JS). */
#mu-help-center.mu-hc--fs-hidden {
    display: none !important;
}

/* Reset local : neutralise les styles boutons/liens du theme (Bootstrap,
   Histudy et le kit Elementor peignent button/a en rose #F24080...).
   :where() maintient le reset a (1,0,0) — au-dessus du kit Elementor
   (0,1,1), mais SOUS nos regles de composants (1,1,0) qui peuvent donc
   toujours le surcharger (degrade de la bulle, fonds des boutons...). */
#mu-help-center :where(button) {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
}
/* Focus clavier : anneau bicolore (blanc + sombre) lisible aussi bien sur
   l'en-tete violet que sur fond blanc. Le theme Histudy pose
   a:focus{outline:none} : cette regle (0,2,0) le bat pour nos liens. */
#mu-help-center :where(button, a):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(16, 24, 40, 0.85);
}
#mu-help-center :where(a) {
    text-decoration: none;
}
#mu-help-center :where(p) {
    margin: 0;
}
#mu-help-center *,
#mu-help-center *::before,
#mu-help-center *::after {
    box-sizing: border-box;
}
#mu-help-center svg {
    display: block;
    flex: none;
}

/* ================================================================
   1. BULLE FLOTTANTE
   ================================================================ */
#mu-help-center .mu-hc-bubble {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--hc-grad);
    color: #fff;
    pointer-events: auto;
    box-shadow:
        0 4px 10px rgba(91, 11, 160, 0.28),
        0 12px 32px rgba(91, 11, 160, 0.32);
    transform: none;
    opacity: 1;
    visibility: visible;
    transition:
        transform 220ms var(--hc-spring),
        box-shadow 220ms var(--hc-ease-out),
        opacity 160ms var(--hc-ease-out),
        visibility 0s;
}
/* Entree au chargement de la page : rien n'apparait de nulle part. */
@keyframes mu-hc-enter {
    from {
        opacity: 0;
        transform: scale(0.6) translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* backwards (PAS both/forwards) : un fill actif ecraserait a jamais les
   transform des etats :hover/:active une fois l'animation terminee. */
#mu-help-center[data-state="bubble"] .mu-hc-bubble {
    animation: mu-hc-enter 480ms var(--hc-spring) backwards;
}
@media (hover: hover) and (pointer: fine) {
    #mu-help-center .mu-hc-bubble:hover {
        transform: scale(1.08);
        box-shadow:
            0 6px 14px rgba(91, 11, 160, 0.32),
            0 18px 44px rgba(91, 11, 160, 0.42);
    }
}
#mu-help-center .mu-hc-bubble:active {
    transform: scale(0.94);
}
/* Bulle cachee dans les etats "open" et "bar". */
#mu-help-center:not([data-state="bubble"]) .mu-hc-bubble {
    animation: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.55);
    transition:
        transform 160ms var(--hc-ease-out),
        opacity 140ms var(--hc-ease-out),
        visibility 0s linear 160ms;
}

/* Icone : c'est ELLE qui porte l'animation d'attention (le survol de la
   bulle garde ainsi son scale sans conflit de transform). */
#mu-help-center .mu-hc-bubble-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
#mu-help-center .mu-hc-bubble-icon svg {
    fill: currentColor;
}
@keyframes mu-hc-nudge {
    0%, 14%, 100% { transform: rotate(0) scale(1); }
    3%  { transform: rotate(-13deg) scale(1.08); }
    6%  { transform: rotate(10deg)  scale(1.1); }
    9%  { transform: rotate(-6deg)  scale(1.06); }
    12% { transform: rotate(3deg)   scale(1.02); }
}
#mu-help-center[data-state="bubble"] .mu-hc-bubble-icon {
    animation: mu-hc-nudge 7s ease-in-out 3s infinite;
}

/* Halo "ping" derriere la bulle : anneau a centre TRANSPARENT (un fond
   plein passerait devant le degrade des que la bulle porte un transform,
   z-index:-1 etant confine par le contexte d'empilement). opacity:0 au
   repos : l'anneau n'existe que pendant son animation, et l'animation
   n'est declaree que dans l'etat "bubble" (rien ne tourne quand la bulle
   est cachee — CPU/batterie). */
#mu-help-center .mu-hc-halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.5);
    opacity: 0;
    z-index: -1;
}
#mu-help-center[data-state="bubble"] .mu-hc-halo {
    animation: mu-hc-ping 3.2s cubic-bezier(0, 0, 0.2, 1) 1.2s infinite;
}
@keyframes mu-hc-ping {
    0%   { transform: scale(1);    opacity: 0.55; }
    65%  { transform: scale(1.65); opacity: 0; }
    100% { transform: scale(1.65); opacity: 0; }
}

/* Pastille verte "nous sommes en ligne" (haut-gauche, comme wisecool). */
#mu-help-center .mu-hc-online {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--hc-green);
    border: 2.5px solid #fff;
    z-index: 2;
}
#mu-help-center .mu-hc-online-ping {
    position: absolute;
    inset: -2.5px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.6);
    opacity: 0;
}
#mu-help-center[data-state="bubble"] .mu-hc-online-ping {
    animation: mu-hc-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Infobulle "تحتاج مساعدة؟" : pilule sombre a gauche de la bulle.
   Visible au survol/focus, et automatiquement quelques secondes
   (classe .mu-hc--wave posee par le JS, une fois par session). */
#mu-help-center .mu-hc-tip {
    position: absolute;
    top: 50%;
    right: calc(100% + 16px);
    transform: translateY(-50%) translateX(10px) scale(0.92);
    transform-origin: 100% 50%;
    background: #101828;
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    padding: 10px 18px;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, 0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 200ms var(--hc-ease-out),
        transform 260ms var(--hc-spring),
        visibility 0s linear 200ms;
}
/* Petite fleche de la pilule, cote bulle. */
#mu-help-center .mu-hc-tip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-left-color: #101828;
}
#mu-help-center.mu-hc--wave .mu-hc-tip,
#mu-help-center .mu-hc-bubble:focus-visible .mu-hc-tip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
    transition:
        opacity 220ms var(--hc-ease-out),
        transform 300ms var(--hc-spring),
        visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
    #mu-help-center .mu-hc-bubble:hover .mu-hc-tip {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0) scale(1);
        transition:
            opacity 220ms var(--hc-ease-out),
            transform 300ms var(--hc-spring),
            visibility 0s;
    }
}
/* Coucou de la main dans l'infobulle. */
@keyframes mu-hc-wave {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(18deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(14deg); }
    80% { transform: rotate(-6deg); }
}
#mu-help-center .mu-hc-tip-wave {
    display: inline-block;
    transform-origin: 70% 75%;
}
#mu-help-center.mu-hc--wave .mu-hc-tip-wave {
    animation: mu-hc-wave 1.2s ease-in-out 2;
}

/* ================================================================
   2. BANDE MINIMISEE
   ================================================================ */
#mu-help-center .mu-hc-bar {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--hc-grad);
    color: #fff;
    border-radius: 999px;
    padding: 8px 10px;
    white-space: nowrap;
    box-shadow:
        0 4px 10px rgba(91, 11, 160, 0.28),
        0 12px 32px rgba(91, 11, 160, 0.32);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.9);
    transform-origin: 100% 100%;
    transition:
        transform 160ms var(--hc-ease-out),
        opacity 140ms var(--hc-ease-out),
        visibility 0s linear 160ms;
}
#mu-help-center[data-state="bar"] .mu-hc-bar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition:
        transform 320ms var(--hc-spring),
        opacity 200ms var(--hc-ease-out),
        visibility 0s;
    animation: mu-hc-bar-hop 8s ease-in-out 4s infinite;
}
/* Petit saut periodique : la bande aussi attire l'attention. */
@keyframes mu-hc-bar-hop {
    0%, 12%, 100% { transform: translateY(0); }
    3% { transform: translateY(-7px); }
    6% { transform: translateY(0); }
    9% { transform: translateY(-3px); }
}
#mu-help-center .mu-hc-bar-main {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 4px 10px;
    border-radius: 999px;
    transition: transform 160ms var(--hc-ease-out);
}
#mu-help-center .mu-hc-bar-main:active {
    transform: scale(0.97);
}
#mu-help-center .mu-hc-bar-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
}
#mu-help-center .mu-hc-bar-title {
    font-size: 15px;
    font-weight: 700;
}
#mu-help-center .mu-hc-bar-open,
#mu-help-center .mu-hc-bar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.92);
    transition: transform 140ms var(--hc-ease-out), background-color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
    #mu-help-center .mu-hc-bar-open:hover,
    #mu-help-center .mu-hc-bar-close:hover {
        background: rgba(255, 255, 255, 0.18);
    }
    #mu-help-center .mu-hc-bar-open:hover {
        transform: translateY(-2px);
    }
}
#mu-help-center .mu-hc-bar-open:active,
#mu-help-center .mu-hc-bar-close:active {
    transform: scale(0.9);
}

/* ================================================================
   3. PANNEAU
   ================================================================ */
#mu-help-center .mu-hc-panel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: min(384px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 40px));
    max-height: min(640px, calc(100dvh - 40px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 8px 20px rgba(16, 24, 40, 0.12),
        0 28px 70px rgba(16, 24, 40, 0.24);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px) scale(0.92);
    transform-origin: calc(100% - 32px) 100%;
    transition:
        transform 180ms var(--hc-ease-out),
        opacity 150ms var(--hc-ease-out),
        visibility 0s linear 180ms;
}
#mu-help-center[data-state="open"] .mu-hc-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    /* Entree plus lente que la sortie (ressort), sortie snappy. */
    transition:
        transform 340ms var(--hc-spring),
        opacity 220ms var(--hc-ease-out),
        visibility 0s;
}
#mu-help-center .mu-hc-panel:focus {
    outline: none;
}

/* --- En-tete degrade + blobs decoratifs flottants --- */
#mu-help-center .mu-hc-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    background: var(--hc-grad);
    color: #fff;
    overflow: hidden;
    flex: none;
}
#mu-help-center .mu-hc-head-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    background: rgba(255, 255, 255, 0.14);
    pointer-events: none;
}
#mu-help-center .mu-hc-head-blob-1 {
    width: 130px;
    height: 130px;
    top: -70px;
    left: -30px;
}
#mu-help-center .mu-hc-head-blob-2 {
    width: 90px;
    height: 90px;
    bottom: -55px;
    right: 60px;
    background: rgba(255, 255, 255, 0.1);
}
/* Les blobs ne derivent que panneau ouvert (pas d'animation dans un
   sous-arbre visibility:hidden : la timeline tournerait pour rien). */
#mu-help-center[data-state="open"] .mu-hc-head-blob-1 {
    animation: mu-hc-drift 9s ease-in-out infinite alternate;
}
#mu-help-center[data-state="open"] .mu-hc-head-blob-2 {
    animation: mu-hc-drift 7s ease-in-out 1s infinite alternate-reverse;
}
@keyframes mu-hc-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(14px, 10px, 0) scale(1.15); }
}
#mu-help-center .mu-hc-head-id {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
#mu-help-center .mu-hc-head-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
#mu-help-center .mu-hc-head-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#mu-help-center .mu-hc-head-txt strong {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
}
#mu-help-center .mu-hc-head-txt span {
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.4px;
    opacity: 0.85;
    direction: ltr;
    text-align: right;
}
#mu-help-center .mu-hc-head-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}
#mu-help-center .mu-hc-min,
#mu-help-center .mu-hc-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    transition: transform 140ms var(--hc-ease-out), background-color 140ms ease;
}
@media (hover: hover) and (pointer: fine) {
    #mu-help-center .mu-hc-min:hover,
    #mu-help-center .mu-hc-close:hover {
        background: rgba(255, 255, 255, 0.26);
    }
    #mu-help-center .mu-hc-min:hover svg {
        transform: translateY(2px);
    }
}
#mu-help-center .mu-hc-min svg {
    transition: transform 160ms var(--hc-ease-out);
}
#mu-help-center .mu-hc-min:active,
#mu-help-center .mu-hc-close:active {
    transform: scale(0.9);
}

/* --- Corps --- */
#mu-help-center .mu-hc-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#mu-help-center .mu-hc-greet strong {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--hc-ink);
}
#mu-help-center .mu-hc-greet p {
    font-size: 14.5px;
    color: var(--hc-muted);
    margin-top: 2px;
}
#mu-help-center .mu-hc-greet-wave {
    display: inline-block;
    transform-origin: 70% 75%;
}
#mu-help-center[data-state="open"] .mu-hc-greet-wave {
    animation: mu-hc-wave 1.4s ease-in-out 400ms 1 both;
}

/* Statut "en ligne". */
#mu-help-center .mu-hc-status {
    display: flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    font-size: 13.5px;
    font-weight: 700;
    color: #15803D;
    background: #F0FDF4;
    border: 1px solid #DCFCE7;
    border-radius: 999px;
    padding: 6px 14px;
}
#mu-help-center .mu-hc-status-dot {
    position: relative;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--hc-green);
}
#mu-help-center .mu-hc-status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.5);
    opacity: 0;
}
#mu-help-center[data-state="open"] .mu-hc-status-dot::after {
    animation: mu-hc-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Horaires. */
#mu-help-center .mu-hc-hours {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--hc-soft);
    border: 1px solid var(--hc-line);
    border-radius: 16px;
    padding: 12px 14px;
}
#mu-help-center .mu-hc-hours-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #F1EBFD;
    color: var(--hc-violet);
    flex: none;
}
#mu-help-center .mu-hc-hours-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#mu-help-center .mu-hc-hours-txt strong {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--hc-ink);
}
#mu-help-center .mu-hc-hours-txt span {
    font-size: 13px;
    color: var(--hc-muted);
    line-height: 1.45;
}

/* --- Boutons d'action (WhatsApp / Messenger / Tel) --- */
#mu-help-center .mu-hc-action {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--hc-line);
    border-radius: 16px;
    padding: 12px 14px;
    color: var(--hc-ink);
    transition:
        transform 180ms var(--hc-ease-out),
        box-shadow 180ms var(--hc-ease-out),
        border-color 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
    #mu-help-center .mu-hc-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(16, 24, 40, 0.1);
    }
    #mu-help-center .mu-hc-action-wa:hover  { border-color: rgba(37, 211, 102, 0.45); }
    #mu-help-center .mu-hc-action-ms:hover  { border-color: rgba(0, 106, 255, 0.4); }
    #mu-help-center .mu-hc-action-tel:hover { border-color: rgba(109, 40, 217, 0.4); }
    #mu-help-center .mu-hc-action:hover .mu-hc-action-arrow {
        transform: translateX(-4px);
        opacity: 1;
    }
}
#mu-help-center .mu-hc-action:active {
    transform: scale(0.98);
}
#mu-help-center .mu-hc-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    flex: none;
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.16);
}
#mu-help-center .mu-hc-action-wa  .mu-hc-action-icon { background: linear-gradient(135deg, #34E27A 0%, #1FAF54 100%); }
#mu-help-center .mu-hc-action-ms  .mu-hc-action-icon { background: linear-gradient(135deg, #00B2FF 0%, #006AFF 100%); }
#mu-help-center .mu-hc-action-tel .mu-hc-action-icon { background: var(--hc-grad); }
#mu-help-center .mu-hc-action-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
#mu-help-center .mu-hc-action-txt strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--hc-ink);
}
#mu-help-center .mu-hc-action-txt > span {
    font-size: 12.5px;
    color: var(--hc-muted);
}
#mu-help-center .mu-hc-action-num {
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--hc-violet-deep) !important;
    text-align: right;
}
#mu-help-center .mu-hc-action-arrow {
    display: flex;
    color: var(--hc-muted);
    opacity: 0.55;
    transition: transform 200ms var(--hc-ease-out), opacity 200ms ease;
}

/* --- Pied --- */
#mu-help-center .mu-hc-foot {
    flex: none;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--hc-muted);
    padding: 10px 16px 14px;
}

/* --- Entree en cascade du contenu a chaque ouverture --- */
@keyframes mu-hc-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* backwards : cache pendant le delai de stagger, puis rend la main aux
   styles de repos (sinon le fill tuerait les :hover des lignes d'action). */
#mu-help-center[data-state="open"] .mu-hc-stagger {
    animation: mu-hc-rise 480ms var(--hc-ease-out) backwards;
}
#mu-help-center[data-state="open"] .mu-hc-greet   { animation-delay: 60ms; }
#mu-help-center[data-state="open"] .mu-hc-status  { animation-delay: 110ms; }
#mu-help-center[data-state="open"] .mu-hc-hours   { animation-delay: 160ms; }
#mu-help-center[data-state="open"] .mu-hc-action-wa  { animation-delay: 210ms; }
#mu-help-center[data-state="open"] .mu-hc-action-ms  { animation-delay: 260ms; }
#mu-help-center[data-state="open"] .mu-hc-action-tel { animation-delay: 310ms; }
#mu-help-center[data-state="open"] .mu-hc-foot    { animation-delay: 370ms; }

/* ================================================================
   4. RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
    #mu-help-center {
        /* Memes deux decalages qu'en bureau (voir la regle racine plus haut),
           avec la marge de base reduite a 16px. */
        bottom: calc(16px + var(--mu-hc-nav-offset, 0px) + var(--mu-hc-bar-offset, 0px));
        right: 16px;
    }
    #mu-help-center .mu-hc-bubble {
        width: 58px;
        height: 58px;
    }
    #mu-help-center .mu-hc-bubble-icon svg {
        width: 30px;
        height: 30px;
    }
    /* Ancre directement au viewport : le containing block d'un fixed exclut
       la barre de defilement, contrairement a 100vw (coin gauche rogne en
       fenetre etroite sous Windows sinon). Aucun ancetre de .mu-hc ne porte
       de transform : le fixed est sur. */
    #mu-help-center .mu-hc-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        /* Ce panneau est `fixed` : il est ancre au viewport, PAS a la racine
           du widget - il ne suit donc pas ses decalages tout seul. Il faut
           les repeter ici, sinon la bulle remonte au-dessus de la barre
           d'achat mais le panneau ouvert, lui, reste dessous. */
        bottom: calc(16px + var(--mu-hc-nav-offset, 0px) + var(--mu-hc-bar-offset, 0px));
        width: auto;
        max-height: calc(100vh - 32px - var(--mu-hc-nav-offset, 0px) - var(--mu-hc-bar-offset, 0px));
        max-height: calc(100dvh - 32px - var(--mu-hc-nav-offset, 0px) - var(--mu-hc-bar-offset, 0px));
        border-radius: 20px;
        transition: bottom .3s ease;
    }
}

/* ================================================================
   5. ACCESSIBILITE — mouvement reduit : on garde les fondus,
      on supprime tout deplacement/rebond/pulsation.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    #mu-help-center[data-state="bubble"] .mu-hc-bubble,
    #mu-help-center[data-state="bubble"] .mu-hc-bubble-icon,
    #mu-help-center[data-state="bar"] .mu-hc-bar,
    #mu-help-center .mu-hc-halo,
    #mu-help-center .mu-hc-online-ping,
    #mu-help-center .mu-hc-status-dot::after,
    #mu-help-center .mu-hc-head-blob,
    #mu-help-center .mu-hc-tip-wave,
    #mu-help-center[data-state="open"] .mu-hc-greet-wave,
    #mu-help-center[data-state="open"] .mu-hc-stagger {
        animation: none !important;
    }
    #mu-help-center .mu-hc-bubble,
    #mu-help-center .mu-hc-bar,
    #mu-help-center .mu-hc-panel,
    #mu-help-center .mu-hc-tip {
        transition-property: opacity, visibility;
        transform: none !important;
    }
    /* La racine porte desormais une transition sur `bottom` (remontee au-dessus
       de la barre d'achat). Le repositionnement reste indispensable - c'est le
       GLISSEMENT qu'on supprime : le widget se place instantanement au bon
       endroit, sans mouvement anime. */
    #mu-help-center,
    #mu-help-center .mu-hc-panel {
        transition-duration: 0s !important;
    }
    /* Le translateY(-50%) de l'infobulle est du POSITIONNEMENT (centrage
       vertical sur la bulle), pas de l'animation : on le conserve. */
    #mu-help-center .mu-hc-tip {
        transform: translateY(-50%) !important;
    }
}