/*
 * FONTEXTE — le site en trois langues : voile, sélecteur, écriture à l'envers
 * ---------------------------------------------------------------------------
 * Cette feuille ne sert qu'à la traduction du site (assets/i18n.js). Elle
 * porte trois choses, et rien du reste de la mise en forme :
 *
 *   1. le voile — le corps de la page est masqué le temps que la traduction se
 *      pose, pour qu'un visiteur du Caire ne voie pas le français passer avant
 *      l'arabe. Il se lève de lui-même au bout d'une seconde, par une
 *      animation et non par un script : si le JavaScript est coupé, si un
 *      dictionnaire manque, si le réseau tombe, la page paraît en français —
 *      jamais une page blanche ;
 *
 *   2. le sélecteur de langue, posé dans l'en-tête par assets/i18n.js ;
 *
 *   3. l'écriture de droite à gauche, pour l'arabe. Le sens est porté par
 *      l'attribut `dir` de la balise <html> : les rangées en flex et les
 *      grilles se retournent alors d'elles-mêmes, et il ne reste ici que ce
 *      que le navigateur ne peut pas deviner — les marges, filets et
 *      alignements écrits à gauche ou à droite en dur dans style.css.
 *
 * Le texte du visiteur, lui, garde son propre sens de lecture : un document
 * français déposé dans l'atelier arabe reste aligné à gauche
 * (`unicode-bidi: plaintext`, plus bas), parce que c'est la langue du texte
 * qui commande, pas celle de l'interface.
 */

/* ========================================================== 1. le voile */

/*
 * `i18n-attente` est posée sur <html> par la fonction de bord
 * (netlify/edge-functions/langue.ts) quand la langue servie n'est pas le
 * français, et retirée par assets/i18n.js dès la traduction posée.
 *
 * L'animation est le filet de sécurité : elle rend la page visible au bout de
 * 1 s quoi qu'il arrive. Aucune page ne peut donc rester masquée.
 */
html.i18n-attente body {
  visibility: hidden;
  animation: i18n-decouvre 0s linear 1s forwards;
}

@keyframes i18n-decouvre {
  to { visibility: visible; }
}

/* Un visiteur qui refuse les animations n'attend pas derrière un voile. */
@media (prefers-reduced-motion: reduce) {
  html.i18n-attente body { visibility: visible; }
}

/* ===================================================== 2. le sélecteur */

.i18n-selecteur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid #cbdcf2;
  border-radius: 999px;
  background: #fff;
  line-height: 1;
}

.i18n-selecteur-globe { font-size: 14px; }

.i18n-selecteur-choix {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: #3f6cbe;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 2px 16px 2px 2px;
  cursor: pointer;
  /* Le chevron, dessiné plutôt que chargé : une image de plus pour trois
     langues n'en valait pas la peine. */
  background-image: linear-gradient(45deg, transparent 50%, #3f6cbe 50%),
                    linear-gradient(135deg, #3f6cbe 50%, transparent 50%);
  background-position: right 6px center, right 2px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.i18n-selecteur-choix:focus-visible { outline: 2px solid #3f6cbe; outline-offset: 2px; }

[dir="rtl"] .i18n-selecteur-choix {
  padding: 2px 2px 2px 16px;
  background-position: left 6px center, left 2px center;
}

/* Dans la barre de navigation repliée (sous 900 px), le sélecteur se pose sur
   sa propre ligne comme les autres entrées du menu. */
@media (max-width: 900px) {
  .i18n-selecteur { align-self: flex-start; }
}

/* ============================================ 3. l'arabe, de droite à gauche */

/* Les fontes arabes ne sont demandées que si l'arabe est servi
   (assets/i18n.js pose le lien lui-même). */
html[lang="ar"] body {
  font-family: 'Noto Naskh Arabic', 'Segoe UI', 'Arial', serif;
  letter-spacing: 0;
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .brand-word,
html[lang="ar"] .eyebrow,
html[lang="ar"] .btn {
  font-family: 'Noto Kufi Arabic', 'Noto Naskh Arabic', 'Segoe UI', sans-serif;
  letter-spacing: 0;
}

/* L'arabe n'a pas de capitales : les libellés mis en majuscules par style.css
   y perdraient leur forme, et l'espacement des lettres coupe les liaisons. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .section-rank,
html[lang="ar"] .badge,
html[lang="ar"] .nav a,
html[lang="ar"] .footer-col h4,
html[lang="ar"] .passage-echo span {
  text-transform: none;
  letter-spacing: 0;
}

/* --- ce que le navigateur ne retourne pas tout seul */

[dir="rtl"] body { text-align: right; }

/* Les listes : la puce passe à droite. */
[dir="rtl"] .reco,
[dir="rtl"] .terms-clauses,
[dir="rtl"] .pay-setup ul { padding-left: 0; padding-right: 22px; }

[dir="rtl"] .contact-points li { padding-left: 0; padding-right: 26px; }

/* Les filets de couleur qui ouvrent un encadré — citation relevée, bandeau de
   similitude, ligne de rapport, fenêtre de paiement — passent du bord gauche
   au bord droit. Le filet de gauche redevient un simple trait, et la couleur
   de l'état — vert, orange, rouge — est reprise à droite, une à une : c'est
   elle qui porte le sens, elle ne peut pas être perdue en chemin. */
[dir="rtl"] .passage-echo blockquote,
[dir="rtl"] .passage-web,
[dir="rtl"] .passage-ai,
[dir="rtl"] .report-excluded,
[dir="rtl"] .ai-confidence,
[dir="rtl"] .report-item,
[dir="rtl"] .pay-line {
  border-left: 1px solid var(--line, #e3e9f2);
  border-right-style: solid;
  border-right-width: 4px;
}

[dir="rtl"] .sim-banner,
[dir="rtl"] .verify-status {
  border-left: 1px solid var(--line, #e3e9f2);
  border-right-style: solid;
  border-right-width: 7px;
}

[dir="rtl"] .passage-echo blockquote { border-right-color: var(--blue, #3f6cbe); }
[dir="rtl"] .passage-excluded blockquote { border-right-color: #2f8f6b; }
[dir="rtl"] .passage-web { border-right-color: #c8452f; }
[dir="rtl"] .passage-ai { border-right-color: #7c5cd6; }
[dir="rtl"] .report-excluded { border-right-color: #2f8f6b; }
[dir="rtl"] .pay-line { border-right-color: var(--blue, #3f6cbe); }
[dir="rtl"] .ai-confidence { border-right-color: #b7c2d0; }
[dir="rtl"] .ai-confidence-elevee { border-right-color: #1c9c6b; }
[dir="rtl"] .ai-confidence-moyenne { border-right-color: #d98324; }
[dir="rtl"] .ai-confidence-faible { border-right-color: #c8452f; }
[dir="rtl"] .report-item { border-right-color: #c9d4e4; }
[dir="rtl"] .report-item.is-ok { border-right-color: #1c9c6b; }
[dir="rtl"] .report-item.is-warn { border-right-color: #e08a1e; }
[dir="rtl"] .report-item.is-bad { border-right-color: #c8452f; }
[dir="rtl"] .sim-banner { border-right-color: var(--line, #e3e9f2); }
[dir="rtl"] .sim-banner.sim-green { border-right-color: #1c9c6b; }
[dir="rtl"] .sim-banner.sim-orange { border-right-color: #e08a1e; }
[dir="rtl"] .sim-banner.sim-red { border-right-color: #c8452f; }
[dir="rtl"] .verify-status { border-right-color: #c9d4e4; }
[dir="rtl"] .verify-status.is-ok { border-right-color: #1c9c6b; }
[dir="rtl"] .verify-status.is-warn { border-right-color: #e08a1e; }
[dir="rtl"] .verify-status.is-bad { border-right-color: #c8452f; }

/* Ce qui était poussé à droite par une marge automatique est poussé à gauche. */
[dir="rtl"] .passage-pos,
[dir="rtl"] .pay-locked .btn,
[dir="rtl"] .pay-actions,
[dir="rtl"] .wave-search,
[dir="rtl"] .menu-toggle { margin-left: 0; margin-right: auto; }

/* Les valeurs des fiches — certificat, vérification, authentification — sont
   alignées contre le texte qui les nomme : à gauche en écriture inversée. */
[dir="rtl"] .cert-row strong,
[dir="rtl"] .auth-rows dd,
[dir="rtl"] .verify-rows dd,
[dir="rtl"] .pay-field-row strong,
[dir="rtl"] .ai-families b,
[dir="rtl"] .source-table th:nth-child(2),
[dir="rtl"] .source-table th:nth-child(3) { text-align: left; }

/* Le rang des sections (« I », « II ») et son filet. */
[dir="rtl"] .section-rank {
  padding-right: 0; padding-left: 12px;
  margin-right: 0; margin-left: 12px;
  border-right: 0; border-left: 1px solid var(--line, #e3e9f2);
}

[dir="rtl"] .brand-word { margin-right: 0; margin-left: -.16em; }
[dir="rtl"] .badge { margin-left: 0; margin-right: 9px; }
[dir="rtl"] .rule-counts i { margin-left: 0; margin-right: 7px; }
[dir="rtl"] .web-matches em { margin-left: 0; margin-right: 7px; }
[dir="rtl"] .option-note { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .visits-key-visitors { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .contact-head { padding-right: 0; padding-left: 34px; }
[dir="rtl"] .passage-echo span { margin-right: 0; margin-left: 8px; }

/* ------------------------------- le texte du visiteur garde son propre sens */

/*
 * Un document déposé peut être en français, en anglais ou en arabe, quelle que
 * soit la langue de l'interface : c'est au texte de dire son sens de lecture.
 * `plaintext` le laisse faire, paragraphe par paragraphe — l'arabe part à
 * droite, le français à gauche, dans la même page.
 */
[dir="rtl"] textarea,
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]),
[dir="rtl"] .passage-echo blockquote,
[dir="rtl"] .relecture-texte,
[dir="rtl"] .relecture-marge,
[dir="rtl"] [data-text-preview],
[dir="rtl"] .report-excerpt {
  unicode-bidi: plaintext;
  text-align: start;
}

/* Les adresses, empreintes, codes de reçu et liens de vérification s'écrivent
   toujours de gauche à droite, même au milieu d'une phrase en arabe. */
[dir="rtl"] code,
[dir="rtl"] .cert-row strong,
[dir="rtl"] .verify-rows dd,
[dir="rtl"] [data-fontexte-version] {
  direction: ltr;
  unicode-bidi: isolate;
}