/* =========================================================================
   ma-lang.css — Selecteur de langue et sens de lecture.
   -------------------------------------------------------------------------
   Feuille a part plutot qu'ajout dans style-new.css : les fichiers
   statiques sont servis avec un cache d'un an, et cette feuille evolue au
   rythme des traductions.

   Tous les selecteurs sont prefixes `ma-` : 93 pages du site se terminent
   par un bloc « OVERRIDE LAYOUT » qui masque tout element nomme .header,
   .sidebar, #overlay ou .bottom-nav. Un nom non prefixe deviendrait
   invisible sans prevenir.
   ========================================================================= */

/* ---------- Selecteur de langue ----------------------------------------- */
.ma-lang { position: relative; margin-inline-start: 8px; flex: 0 0 auto; }

.ma-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 10px;
	background: rgba(255, 255, 255, .05);
	color: inherit;
	font: inherit;
	font-size: .84rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.ma-lang__btn:hover,
.ma-lang.is-open .ma-lang__btn {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .26);
}
.ma-lang__btn .fa-chevron-down { font-size: .7em; transition: transform .25s; }
.ma-lang.is-open .ma-lang__btn .fa-chevron-down { transform: rotate(180deg); }
.ma-lang__code { letter-spacing: .04em; }

.ma-lang__panel {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	z-index: 120;
	min-width: 190px;
	padding: 7px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	background: #10201a;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s, transform .2s, visibility .2s;
}
.ma-lang:hover .ma-lang__panel,
.ma-lang.is-open .ma-lang__panel { opacity: 1; visibility: visible; transform: translateY(0); }

.ma-lang__panel a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 11px;
	border-radius: 8px;
	color: #e7f0ea;
	font-size: .9rem;
	text-decoration: none;
}
.ma-lang__panel a:hover { background: rgba(255, 255, 255, .08); }
.ma-lang__panel a[aria-current="true"] { background: rgba(255, 255, 255, .06); font-weight: 700; }

/* Drapeaux dessines : les emojis drapeaux ne sont pas rendus sous Windows,
   qui affiche les deux lettres du pays a la place. */
.ma-flag {
	width: 21px;
	height: 15px;
	flex: 0 0 auto;
	border-radius: 2.5px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .3) inset;
}

/* ---------- Lecture de droite a gauche (arabe) --------------------------- */
[dir="rtl"] .ma-crumb__sep { transform: scaleX(-1); display: inline-block; }
[dir="rtl"] .ma-card__go .fa-arrow-right,
[dir="rtl"] .ma-rel__all .fa-arrow-right,
[dir="rtl"] .ma-pager__dir .fa-arrow-right,
[dir="rtl"] .ma-pager__dir .fa-arrow-left { transform: scaleX(-1); }

[dir="rtl"] .ma-wlist .fa-angle-right { transform: scaleX(-1); }

/* La grille principale suit le sens du document : la colonne de droite
   passe a gauche toute seule. Restent les retraits et les bordures. */
[dir="rtl"] .sidebar-menu,
[dir="rtl"] .ma-wlist,
[dir="rtl"] .main-content ul,
[dir="rtl"] .main-content ol { padding-left: 0; padding-right: 1.4em; }

[dir="rtl"] .widget-title,
[dir="rtl"] .ma-faq__q,
[dir="rtl"] .sidebar-left-header { text-align: right; }

/* L'arabe se lit plus confortablement un peu plus grand et plus aere :
   a taille egale, les points diacritiques se touchent. */
html[lang="ar"] .main-content p,
html[lang="ar"] .main-content li,
html[lang="ar"] .ma-faq__a { line-height: 1.95; font-size: 1.04em; }

/* Un code, une heure ou un numero de verset restent lisibles de gauche a
   droite au milieu d'une phrase arabe. */
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] time { direction: ltr; unicode-bidi: embed; }

/* Le texte coranique et les hadiths gardent leur police et leur taille
   propres : ils sont deja en arabe dans les trois versions du site. */
.arabic, .arabic-text, .ayah, .hadith-arabic { direction: rtl; text-align: right; }