/* =====================================================================
   QaLyZa, site C : pages en arabe (<html lang="ar" dir="rtl">), chargée
   par les seules pages de ar/ (ajoutée par outils/traduire-site.mjs).
   Le sens de lecture s'inverse : flex et grilles suivent seuls ; ici, ce qui
   est placé à gauche ou à droite en dur. Les dessins (schémas d'échanges,
   maquette 3D, plans) gardent leur sens.
     1. Lettres arabes
     2. En-tête, menu, sélecteur
     3. Composants communs (listes, tableaux, planches, cotes, coupe)
     4. Maquette et tiroir des bâtiments
     5. Pages : accueil, applications, conformité
     6. Assistant du site
   ===================================================================== */

/* ---------- 1. Lettres arabes : Inter n'en a pas, les polices du système prennent le relais ---------- */
:root[lang="ar"] { --font-sans: 'Inter', var(--font-arabe); }
/* L'interlettrage casse la liaison des lettres arabes */
:root[lang="ar"] body, :root[lang="ar"] body * { letter-spacing: 0 !important; }
:root[lang="ar"] body { line-height: 1.7; }
/* Les dessins gardent leur sens : leurs libellés s'ancrent comme dans la version française */
[dir="rtl"] svg { direction: ltr; }
/* Un titre qui commence par un chiffre ou un sigle latin (21 CFR Part 11, horodatages) se lit dans son
   ordre ; il reste aligné à droite */
[dir="rtl"] .cartouche-nom, [dir="rtl"] .sommaire-nom, [dir="rtl"] .referentiel-nom, [dir="rtl"] .planche-cartouche dd,
[dir="rtl"] .cote-valeur, [dir="rtl"] .ref, [dir="rtl"] .q-chrono { unicode-bidi: plaintext; text-align: right; }

/* ---------- 2. En-tête, menu, sélecteur ---------- */
[dir="rtl"] .evitement { left: auto; right: 12px; }
[dir="rtl"] .entete { padding: 0 14px 0 10px; }
[dir="rtl"] .logo { padding: 4px 2px 4px 6px; }
@media (max-width: 767px) {
  [dir="rtl"] .entete { padding-left: 10px; padding-right: 12px; }
}
/* Le libellé arabe (« عرض توضيحي ») est plus long : sur les téléphones étroits, le bouton reste en tête du menu */
@media (max-width: 413px) {
  [dir="rtl"] .entete-demo { display: none; }
  [dir="rtl"] .jour-nuit { margin-inline-start: auto; }
}

/* ---------- 3. Composants communs ---------- */
[dir="rtl"] .coches li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .coches li::before { left: auto; right: 3px; }
[dir="rtl"] .tableau th, [dir="rtl"] .tableau td { padding: 16px 0 16px 22px; text-align: right; }
[dir="rtl"] .tableau td:last-child, [dir="rtl"] .tableau th:last-child { padding-left: 0; }

/* Planches : cartouche, coin replié, trait vers la planche ouverte (à gauche en arabe) */
[dir="rtl"] .cartouche { padding: 14px 18px 14px 16px; text-align: right; }
[dir="rtl"] .cartouche::after {
  right: auto; left: -1px;
  background: linear-gradient(135deg, var(--fond) 50%, var(--trait-2) 50%, var(--papier) 62%);
  border-bottom-left-radius: 0; border-bottom-right-radius: 3px;
}
[dir="rtl"] .cartouche-champs small { padding-right: 0; padding-left: 12px; border-right: 0; border-left: 1px solid var(--trait); }
[dir="rtl"] .cartouche-champs b { padding-left: 0; padding-right: 12px; }
@media (min-width: 1024px) {
  [dir="rtl"] .cartouche[aria-expanded="true"]::before { right: auto; left: calc(-1 * clamp(28px, 4vw, 56px)); }
}
[dir="rtl"] .planche-plis i { transform-origin: 0 50%; }
[dir="rtl"] .planche-plis i:first-child { border-radius: 0 6px 6px 0; }
[dir="rtl"] .planche-plis i:last-child { border-radius: 6px 0 0 6px; }
[dir="rtl"] .planche-plis i + i {
  border-left: 1px solid var(--trait-2); border-right: 0;
  background-image:
    linear-gradient(270deg, color-mix(in srgb, var(--papier-encre) 7%, transparent), transparent 18px),
    linear-gradient(var(--papier-trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--papier-trait) 1px, transparent 1px);
}
[dir="rtl"] .planche.est-anime .planche-plis i:nth-child(2) { animation-name: pli-milieu-rtl; }
[dir="rtl"] .planche.est-anime .planche-plis i:nth-child(1) { animation-name: pli-gauche-rtl; }
@keyframes pli-milieu-rtl { from { transform: rotateY(176deg); filter: brightness(.86); } to { transform: none; filter: none; } }
@keyframes pli-gauche-rtl {
  0%, 40% { transform: rotateY(176deg); opacity: 0; }
  41% { opacity: 1; filter: brightness(.86); }
  100% { transform: none; opacity: 1; filter: none; }
}
[dir="rtl"] .planche-mecanismes li { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .planche-mecanismes li::before { left: auto; right: 0; }
[dir="rtl"] .planche-cartouche { margin-left: 0; margin-right: auto; }
[dir="rtl"] .planche-cartouche dt { border-right: 0; border-left: 1px solid color-mix(in srgb, var(--papier-encre) 22%, transparent); }
[dir="rtl"] .alcoa .alcoa-lettre { padding-right: 0; padding-left: 14px; }

/* Cotes : le trait pointillé part du côté du dessin */
[dir="rtl"] .cote-note { padding: 6px 52px 6px 0; }
[dir="rtl"] .cote-note::before { left: auto; right: 6px; }
[dir="rtl"] .cote-note::after { left: auto; right: 3px; }
@media (max-width: 767px) {
  [dir="rtl"] .cote-note { padding: 8px 28px 14px 0; }
}

/* Coupe du socle */
[dir="rtl"] .coupe-texte { padding: 4px 22px 4px 0; border-left: 0; border-right: 2px solid var(--trait); }
[dir="rtl"] .coupe-ligne.est-actif .coupe-texte { border-right-color: var(--accent); }
@media (max-width: 767px) {
  [dir="rtl"] .coupe-texte { padding-left: 0; padding-right: 14px; }
}
[dir="rtl"] .ecran-fil { margin-left: 0; margin-right: 4px; }

/* ---------- 4. Maquette et tiroir des bâtiments ---------- */
[dir="rtl"] .dio-pin { padding: 6px 9px 6px 11px; }
[dir="rtl"] .dio-tag.est-alerte .dio-alerte, [dir="rtl"] .dio-tag.est-recu .dio-recu {
  padding-left: 0; margin-left: 0; border-left: 0;
  padding-right: 8px; margin-right: 1px; border-right: 1px solid var(--trait-2);
}
@media (max-width: 767px) {
  [dir="rtl"] .dio-pin { padding: 5px 8px 5px 9px; }
}
/* Le tiroir s'ouvre à gauche ; la feuille basse du téléphone ne change pas */
@media (min-width: 768px) {
  [dir="rtl"] .tiroir { right: auto; left: 12px; transform: translateX(calc(-100% - 36px)); }
  [dir="rtl"] .tiroir.est-ouvert { transform: none; }
}
[dir="rtl"] .tiroir::before { background: radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%); }
[dir="rtl"] .tiroir[data-app="lya"]::before {
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(124, 58, 237, .26), transparent 60%),
    radial-gradient(70% 90% at 0% 0%, rgba(47, 108, 237, .20), transparent 60%);
}
[dir="rtl"] .tiroir-fermer { margin-left: 0; margin-right: auto; }

/* ---------- 5. Pages ---------- */
/* Accueil : le texte du hero et la légende passent à droite (la maquette se cadre à gauche, accueil.js) */
[dir="rtl"] .hero-texte { left: auto; right: var(--gouttiere); }
[dir="rtl"] .legende { left: auto; right: var(--gouttiere); }
[dir="rtl"] .legende-btn { padding: 0 7px 0 14px; text-align: right; }
@media (max-width: 1180px) {
  [dir="rtl"] .legende-btn { padding-right: 7px; padding-left: 12px; }
}
@media (max-width: 767px) {
  [dir="rtl"] .hero-texte, [dir="rtl"] .legende { right: auto; }
  [dir="rtl"] .legende-btn { padding-right: 7px; padding-left: 8px; }
}

/* Cartouche des applications : le filet de couleur passe à droite */
[dir="rtl"] .cartouche-app {
  border-left: 1px solid color-mix(in srgb, var(--papier-encre) 42%, transparent);
  border-right: 3px solid var(--a);
}
[dir="rtl"] .tete-lya .cartouche-app { border-right-color: var(--q-lya-a); }
[dir="rtl"] .cartouche-app dt { border-right: 0; border-left: 1px solid color-mix(in srgb, var(--papier-encre) 20%, transparent); }
@media (max-width: 767px) {
  [dir="rtl"] .cartouche-app dt { border-left: 0; }
}

/* Conformité */
[dir="rtl"] .conf-avertissement {
  border-left: 1px solid color-mix(in srgb, var(--papier-encre) 45%, transparent);
  border-right: 3px solid var(--papier-encre);
}
[dir="rtl"] .sommaire-emetteur { text-align: left; }
[dir="rtl"] .referentiel::before { left: auto; right: 0; }
[dir="rtl"] .charge-liste li { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .charge-liste li::before { left: auto; right: 1px; }

/* ---------- 6. Assistant du site : la bulle et le panneau passent à gauche ---------- */
[dir="rtl"] .assistant-bulle, [dir="rtl"] .assistant-invitation, [dir="rtl"] .assistant-panneau {
  right: auto; left: max(16px, env(safe-area-inset-left));
}
[dir="rtl"] .assistant-invitation-message { padding: 13px 13px 14px 40px; border-radius: 18px 18px 18px 6px; text-align: right; }
[dir="rtl"] .assistant-invitation-fermer { right: auto; left: 8px; }
[dir="rtl"] .assistant-tete { padding: 14px 16px 13px 14px; }
[dir="rtl"] .assistant-action { padding: 0 9px 0 11px; }
[dir="rtl"] .assistant-msg li { padding-left: 0; padding-right: 15px; }
[dir="rtl"] .assistant-msg ul li::before { left: auto; right: 2px; }
[dir="rtl"] .assistant-msg ol li { padding-left: 0; padding-right: 19px; }
[dir="rtl"] .assistant-msg ol li::before { left: auto; right: 0; }
[dir="rtl"] .assistant-suggestions button { text-align: right; }
[dir="rtl"] .assistant-envoyer svg { transform: scaleX(-1); }
/* Hors champ du côté qui ne crée pas de défilement horizontal */
[dir="rtl"] .assistant-piege { left: auto; right: -9999px; }
@media (max-width: 767px) {
  [dir="rtl"] .assistant-panneau { left: 0; right: 0; }
}