/* =========================================================================
   Selecteur de langue et sens de lecture.
   -------------------------------------------------------------------------
   Deux sujets, une seule feuille : le bouton de langue de la barre de
   navigation, et les quelques reglages que l'arabe impose. Ecrire cela a
   part evite de toucher site.css, servi avec un cache de dix ans.

   Le reste bascule tout seul : la grille de .shell suit le sens du document,
   la colonne laterale passe donc a gauche en arabe sans une ligne de CSS.
   ========================================================================= */

/* ---------- Bouton de langue -------------------------------------------- */
.nav-lang { position: relative; margin-left: 6px; }

.nav-lang > button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;
	background: rgba(255, 255, 255, .04);
	color: var(--text-secondary, #b9c2d0);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: color .2s, background .2s, border-color .2s;
}
.nav-lang > button:hover,
.nav-lang.open > button {
	color: #fff;
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .22);
}
.nav-lang > button .chevron { width: 12px; height: 12px; transition: transform .25s; }
.nav-lang.open > button .chevron { transform: rotate(180deg); }
.nav-lang-code { letter-spacing: .04em; }

/* Drapeaux dessines en SVG : les emojis drapeaux ne sont pas rendus sous
   Windows, qui affiche a la place les deux lettres du pays. */
.flag {
	display: inline-block;
	width: 21px;
	height: 15px;
	flex: 0 0 auto;
	vertical-align: -2px;
	border-radius: 2.5px;
}
.nav-lang-panel a,
.footer-langs a { display: inline-flex; align-items: center; gap: 9px; }
.nav-lang-panel a { display: flex; }

/* Le panneau s'aligne sur le bord droit du bouton : ouvert a gauche, il
   sortirait de l'ecran sur telephone, ou le bouton touche presque le bord. */
.nav-lang-panel {
	right: 0;
	left: auto;
	min-width: 186px;
}
.nav-lang-panel a[aria-current="true"] {
	color: #fff;
	background: rgba(255, 255, 255, .07);
}

/* Le bouton de langue reste visible quand le menu se replie derriere le
   bouton hamburger : changer de langue ne doit pas demander d'ouvrir le
   menu, surtout pour un visiteur qui ne lit pas la langue affichee. */
@media (max-width: 860px) {
	/* `.nav-drop { display: none }` de site.css s'applique aussi a ce bloc,
	   qui en porte la classe pour reutiliser le script d'ouverture : on le
	   remet en place avec un selecteur plus precis. */
	.nav .nav-lang { display: block; margin-left: auto; margin-right: 4px; }
	.nav .nav-lang > button { padding: 7px 9px; }
	.nav-lang-code { display: none; }
}

/* ---------- Les six langues, en pied de page ----------------------------- */
.footer-langs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .07);
	font-size: 14px;
	color: var(--text-faint, #7c8595);
}
.footer-langs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-langs a { color: var(--text-secondary, #b9c2d0); text-decoration: none; }
.footer-langs a:hover { color: #fff; text-decoration: underline; }
.footer-langs a[aria-current="true"] { color: #fff; font-weight: 600; }

/* ---------- Lecture de droite a gauche (arabe) --------------------------- */
[dir="rtl"] .nav-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-lang { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .nav-lang-panel { right: auto; left: 0; }

[dir="rtl"] .sidebar-nav a[aria-current="page"] {
	border-left: 0;
	border-right: 3px solid var(--primary);
	padding-left: 12px;
	padding-right: 8px;
}
[dir="rtl"] .sidebar-nav a:hover { transform: translateX(-3px); }

[dir="rtl"] .prose ul,
[dir="rtl"] .prose ol { padding-left: 0; padding-right: 22px; }

[dir="rtl"] .note {
	border-left: 1px solid var(--primary-border);
	border-right: 3px solid var(--primary);
}

[dir="rtl"] .dl-tile { text-align: right; }

/* Les chevrons sont dessines avec deux bordures : il faut les retourner,
   sinon la fleche du fil d'Ariane et celle de la FAQ pointent a contresens. */
[dir="rtl"] .faq-item summary::after {
	border-right: 0;
	border-left: 2px solid var(--primary);
	transform: rotate(-45deg) translateY(-3px);
}
[dir="rtl"] .faq-item[open] summary::after { transform: rotate(45deg) translateY(-3px); }
[dir="rtl"] .fil li + li::before {
	border-right: 0;
	border-left: 1.5px solid var(--text-faint);
	transform: rotate(-45deg);
}

/* La fleche « lire la suite » des cartes pointe vers la droite ; en arabe
   elle doit pointer vers la gauche. */
[dir="rtl"] .card-link svg { transform: scaleX(-1); }

/* Pages legales : legal.css retourne deja les encadres et le titre de
   section ; il reste les listes, dont le retrait doit passer a droite. */
[dir="rtl"] .toc ol,
[dir="rtl"] .section-card ul,
[dir="rtl"] .section-card ol { padding-left: 0; padding-right: 22px; }

@media (min-width: 900px) {
	[dir="rtl"] .pub-carre { float: right; margin: 8px 0 18px 26px; }
}

/* L'arabe se lit mieux un peu plus grand et plus aere que le latin a la
   meme taille de police : les hampes et les points diacritiques se touchent
   sinon. */
[lang="ar"] body,
html[lang="ar"] {
	--ar-lh: 1.9;
}
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] .lede,
html[lang="ar"] .faq-answer { line-height: 1.9; }
html[lang="ar"] .prose p { font-size: 17.2px; }

/* Les chiffres d'un code d'appairage ou d'une version restent lisibles de
   gauche a droite, meme dans une phrase arabe. */
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] .code { direction: ltr; unicode-bidi: embed; text-align: left; }