/*
 * Dinouna : ce qui change pour les pages arabes de dinouna.com (dinouna.com/ar/…).
 * Chargée après /style.css, seulement par les pages de site/ar/ : les pages françaises et anglaises ne la lisent pas.
 * Deux choses : la police arabe, et la mise en page retournée (de droite à gauche).
 * Chaque règle reprend le sélecteur de style.css qu'elle retourne : venant après, elle le remplace.
 */

/* Les titres : Baloo Bhaijaan 2, la police arabe arrondie de l'app (licence OFL, polices/OFL-BalooBhaijaan2.txt),
   en 600 et 700 comme Fredoka. Le texte : Noto Naskh Arabic (licence OFL, polices/OFL-NotoNaskhArabic.txt).
   Les deux ne servent qu'aux lettres arabes : les mots en lettres latines (Apple, Google Play, iPhone)
   restent en Fredoka et en Montserrat, comme ailleurs. */
@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("/polices/BalooBhaijaan2_600SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("/polices/BalooBhaijaan2_700Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/polices/NotoNaskhArabic_400Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("/polices/NotoNaskhArabic_700Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  --titre: "Baloo Bhaijaan 2", "Noto Naskh Arabic", "Fredoka", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --texte: "Noto Naskh Arabic", "Montserrat", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
}

/* --- Les textes : l'écriture arabe demande un peu plus grand et plus d'interligne --- */

body {
  font-size: 1.125rem;
  line-height: 1.85;
}
.jeux p,
.tableau,
.pied {
  font-size: 1.0625rem;
}
.date,
.discret,
.entete .retour {
  font-size: 1rem;
}
h1,
h2,
h3 {
  line-height: 1.5;
}
a {
  text-underline-offset: 6px;
}

/* L'espacement entre les lettres casserait les liaisons de l'arabe, et les capitales n'existent pas :
   les noms latins (App Store, Google Play) gardent leur écriture */
.legende,
.etiquette,
.tableau thead th,
.pied .slogan {
  letter-spacing: 0;
  text-transform: none;
}
.legende {
  font-size: 0.875rem;
}
.etiquette {
  font-size: 0.875rem;
}
.tableau thead th {
  font-size: 0.875rem;
}
.chapeau {
  font-size: 1.1875rem;
}

/* --- De droite à gauche ------------------------------------------------ */

/* Hors de l'écran, à droite : en arabe, un élément poussé à gauche ferait défiler la page */
.passer {
  left: auto;
  right: -9999px;
}
.passer:focus {
  left: auto;
  right: 16px;
}

ul,
ol {
  padding-left: 0;
  padding-right: 1.4em;
}

.etapes > li {
  padding-left: 0;
  padding-right: 48px;
}
.etapes > li::before {
  left: auto;
  right: 0;
}

.tableau th,
.tableau td {
  text-align: right;
}
.tableau thead th:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: var(--rayon-etiquette);
}
.tableau thead th:last-child {
  border-top-right-radius: 0;
  border-top-left-radius: var(--rayon-etiquette);
}

.faq summary {
  padding: 16px 18px 16px 52px;
}
.faq summary::after {
  right: auto;
  left: 16px;
}

/* Les champs « À COMPLÉTER » sont en français : ils se lisent de gauche à droite */
.a-completer {
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 599px) {
  .tableau thead {
    left: auto;
    right: -9999px;
  }
  .tableau td[data-titre]::before {
    font-size: 0.875rem;
    letter-spacing: 0;
    text-transform: none;
  }
}