/* ================================================================
   Math Universe — HABILLAGE « aide » (handle mu-habillage-aide)

   Écran : centre d'aide flottant (#mu-help-center, module contacts,
   centre-aide.php + mu-help-center.css) : bulle, panneau en arabe
   (RTL), bande réduite. Même contenu, mêmes liens, même comportement.

   CE QUI CHANGE À L'ÉCRAN
   - couleurs de la marque (violet #501AA2 / #41246D) à la place du
     violet « tawk » d'origine (#6D28D9 / #5B0BA0) : la bulle et l'en-tête
     ressemblent enfin au reste du site ;
   - textes gris à 4,8:1 (au lieu de 4,6:1) et filets plus visibles ;
   - en-tête : quadrillage « cahier » et filet orange de la marque ;
   - salut en titre violet foncé (Tajawal), statut « en ligne » en pastille ;
   - cartes d'action (WhatsApp, Messenger, téléphone) : liseré de la
     couleur du canal côté texte, flèche dans une pastille qui se remplit
     au survol, bord violet au survol et au focus, anneau de focus net ;
   - panneau plus arrondi (20 px), ombre de fenêtre, pied séparé par un
     filet.

   RÈGLES : la feuille règle les VARIABLES du module (--hc-*) et quelques
   propriétés, depuis body.mu-habillage--aide #mu-help-center
   (spécificité 1,1,1 : au-dessus des règles du module, toutes en
   #mu-help-center …). Aucun !important. Tout en px.
   Créée le 09/11/2026 (lot H, Sprint 3).
   ================================================================ */

body.mu-habillage--aide #mu-help-center {
	--hc-grad: linear-gradient(135deg, var(--mu-violet-500) 0%, var(--mu-violet-700) 52%, var(--mu-violet-900) 100%);
	--hc-violet: var(--mu-violet-700);
	--hc-violet-deep: var(--mu-violet-900);
	--hc-ink: var(--mu-encre);
	--hc-muted: var(--mu-texte-doux);
	--hc-line: var(--mu-trait);
	--hc-soft: var(--mu-violet-50);
}

/* Panneau : coins et ombre des jetons. */
body.mu-habillage--aide #mu-help-center .mu-hc-panel {
	border: 1px solid rgba(65, 36, 109, .12);
	border-radius: 20px;
	box-shadow: var(--mu-ombre-modale);
}

/* En-tête : quadrillage « cahier » discret sur le dégradé de marque. */
body.mu-habillage--aide #mu-help-center .mu-hc-head {
	background:
		linear-gradient(var(--mu-quadrillage) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, var(--mu-quadrillage) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--hc-grad);
	box-shadow: inset 0 -3px 0 var(--mu-orange-500);
}

/* Salut : titre de la marque. */
body.mu-habillage--aide #mu-help-center .mu-hc-greet strong {
	font-family: var(--mu-police-ar);
	font-size: 21px;
	color: var(--mu-violet-900);
}

body.mu-habillage--aide #mu-help-center .mu-hc-greet p {
	color: var(--mu-texte-doux);
}

/* Cartes d'action : bord net, survol et focus violets. */
body.mu-habillage--aide #mu-help-center .mu-hc-action {
	border-radius: var(--mu-r-md);
	border-color: var(--mu-trait);
	border-inline-start: 4px solid var(--mu-hc-canal, var(--mu-violet-700));
	box-shadow: 0 2px 6px rgba(33, 18, 58, .06);
}

/* Couleur de chaque canal (liseré) : celle de son icône. */
body.mu-habillage--aide #mu-help-center .mu-hc-action-wa {
	--mu-hc-canal: #1FAF54;
}

body.mu-habillage--aide #mu-help-center .mu-hc-action-ms {
	--mu-hc-canal: #006AFF;
}

body.mu-habillage--aide #mu-help-center .mu-hc-action-tel {
	--mu-hc-canal: var(--mu-violet-700);
}

body.mu-habillage--aide #mu-help-center .mu-hc-action-txt strong {
	font-family: var(--mu-police-ar);
	font-size: 16px;
	color: var(--mu-violet-900);
}

body.mu-habillage--aide #mu-help-center .mu-hc-action:focus-visible {
	outline: 2px solid transparent;
	border-color: var(--mu-violet-700);
	box-shadow: var(--mu-focus-anneau);
}

@media (hover: hover) and (pointer: fine) {
	body.mu-habillage--aide #mu-help-center .mu-hc-action:hover {
		border-color: var(--mu-violet-500);
		box-shadow: var(--mu-ombre-haute);
	}
}

/* Flèche dans une pastille, remplie au survol et au focus. */
body.mu-habillage--aide #mu-help-center .mu-hc-action-arrow {
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: var(--mu-r-pill);
	background: var(--mu-teinte-primaire);
	color: var(--mu-violet-700);
	opacity: 1;
	transition: background-color var(--mu-transition), color var(--mu-transition), transform var(--mu-transition);
}

body.mu-habillage--aide #mu-help-center .mu-hc-action:focus-visible .mu-hc-action-arrow {
	background: var(--mu-violet-700);
	color: #fff;
}

@media (hover: hover) and (pointer: fine) {
	body.mu-habillage--aide #mu-help-center .mu-hc-action:hover .mu-hc-action-arrow {
		background: var(--mu-violet-700);
		color: #fff;
	}
}

/* Pied : filet de séparation. */
body.mu-habillage--aide #mu-help-center .mu-hc-foot {
	margin: 6px 18px 0;
	padding: 10px 0 14px;
	border-top: 1px solid var(--mu-trait);
	color: var(--mu-texte-doux);
}

/* Bloc des horaires : fond violet très clair, bord des jetons. */
body.mu-habillage--aide #mu-help-center .mu-hc-hours {
	border-radius: var(--mu-r-md);
}

/* Boutons de l'en-tête et de la bande : anneau de focus blanc lisible
   sur le dégradé. */
body.mu-habillage--aide #mu-help-center .mu-hc-close:focus-visible,
body.mu-habillage--aide #mu-help-center .mu-hc-min:focus-visible,
body.mu-habillage--aide #mu-help-center .mu-hc-bar-close:focus-visible,
body.mu-habillage--aide #mu-help-center .mu-hc-bar-main:focus-visible,
body.mu-habillage--aide #mu-help-center .mu-hc-bubble:focus-visible {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 2px var(--mu-violet-900), 0 0 0 5px #fff;
}